strapi-plugin-redirect-urls

Don't lose traffic during migrations. Manage URL redirects, track hit counts, and bulk import 301 redirects directly from your Strapi Admin Panel.

Install now

thumbnail for strapi-plugin-redirect-urls

Strapi Redirects & SEO Manager

Supports Strapi v5 License

Don't lose traffic during migrations. Manage URL redirects, track hit counts, and bulk import 301 redirects directly from your Strapi Admin Panel.

!NOTE
Compatible with Strapi v5. This plugin is designed to work seamlessly with the latest Strapi Design System and API.

✨ Features

🎯 Visual Management: Create, edit, and delete redirects effortlessly via the Admin Panel.
📊 Analytics & Tracking: Built-in hit counters to see which redirects are actually being used.
📥 Bulk CSV Import: Migrating from another CMS? Import thousands of redirects in seconds.
⚡ High Performance: Optimized lookup algorithm designed for minimal latency on frontend requests.
🛡️ Type-Safe: Full TypeScript support for reliable development.
🎨 Native Feel: Built with the new Strapi 5 Design System for a consistent UI.

📄 Legal & Terms

For legal terms and conditions, please refer to the Terms & Conditions document.

🔧 Installation

npm install strapi-plugin-redirect-urls
# or
yarn add strapi-plugin-redirect-urls

⚙️ Configuration

The plugin is enabled by default. However, if you need to strictly define it, add the following to your config/plugins.ts file:

export default {
  // Note: The key must match the plugin name defined in your package.json
  'custom-redirects-plugin': {
    enabled: true,
  },
};

🚀 Usage

Managing Redirects via Admin Panel 1.Navigate to the Redirects section in your Strapi admin panel sidebar. 2.Click Create Redirect. 3.Fill in the details:

From: The source URL path (e.g., /old-blog/post-1).
To: The destination URL path (e.g., /blog/new-post-1).
Type: Select 301 Moved Permanently (Standard for SEO).

📂 Bulk Import via CSV

Perfect for site migrations. Your CSV file must follow this format:

from,to,type
/old-about,/about,moved_permanently_301
/products/old-item,/shop/item-123,moved_permanently_301

1.Click the Import CSV button in the plugin dashboard. 2.Upload your file. 3.The system will process the file and report any skipped entries.

💻 Frontend Integration

To make the redirects work, your frontend needs to query Strapi before rendering a 404 page.

API Endpoint GET /api/custom-redirects-plugin/find?from=/old-page

Response:

{
  "from": "/old-page",
  "to": "/new-page",
  "type": "moved_permanently_301"
}

Example: Next.js Middleware (App Router) This is the most performant way to handle redirects in Next.js (Edge Runtime).

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export async function middleware(request: NextRequest) {
  const path = request.nextUrl.pathname;

  try {
    // 1. Check Strapi for a matching redirect
    const response = await fetch(
      `${process.env.STRAPI_URL}/api/custom-redirects-plugin/find?from=${path}`,
      {
        method: 'GET',
        headers: {
            // Add Authorization header if your endpoint is private
            // 'Authorization': `Bearer ${process.env.API_TOKEN}`
        },
        next: { revalidate: 60 } // Optional: Cache result for 60 seconds
      }
    );

    if (response.ok) {
      const redirect = await response.json();
      const status = parseInt(redirect.type.split('_')[1]) || 301;

      // 2. Perform the redirect
      return NextResponse.redirect(new URL(redirect.to, request.url), status);
    }
  } catch (error) {
    // Fail silently so the site doesn't crash if Strapi is down
    console.error('Redirect lookup failed:', error);
  }

  return NextResponse.next();
}

export const config = {
  // Exclude static files, images, and API routes from the check
  matcher: '/((?!api|_next/static|_next/image|favicon.ico).*)',
};

Example: Express.js

app.use(async (req, res, next) => {
  try {
    const response = await fetch(
      `${process.env.STRAPI_URL}/api/custom-redirects-plugin/find?from=${req.path}`
    );

    if (response.ok) {
      const redirect = await response.json();
      const statusCode = parseInt(redirect.type.split('_')[1]) || 301;
      return res.redirect(statusCode, redirect.to);
    }
  } catch (err) {
    // Proceed to normal routing if lookup fails
  }

  next();
});