what am I doing wrong? I'm building an accessible website with NextJS and want to redirect to fitting pages to the plain-language-counterpart. But since they are a different kind of language, their URLs are different, too.

My routes are built like this:

• Standard language = my-website.com/about
• Plain language = my-website.com/plain-language/about

And I have a switch where I can just change the /plain-language/ part

Now I have these routes:

• my-website.com/accessible-webdesign

• my-website.com/plain-language/for-disabled-persons

And if I click the switch on the first one, it will link me to my-website.com/plain-language/accessible-webdesign, which doesn't exist! So I used redirects() and also restarted my server to fix this, but it doesn't work. It doesn't redirect and I get a 404 just as before.

Can you check my code and tell me, what I should change to make it work?

Thank you!

This is my next.config.js:

    const withBundleAnalyzer = require('@next/bundle-analyzer')({
        enabled: process.env.ANALYZE === 'true',
    });

    /** @type {import('next').NextConfig} */
    const path = require('path');
    const withPWA = require('next-pwa')({
        dest: 'public',
        disable: process.env.NODE_ENV === 'development',
        sw: 'sw.js'
    })


    const nextConfig = {
        async redirects(){
            return[
                {
                    source: '/plain-language/accessible-webdesign',
                    destination: '/plain-language/for-disabled-persons',
                    permanent: 'true'
                }
            ]
        },
        
        reactStrictMode: true,
        swcMinify: true,
        trailingSlash: false,
        webpackDevMiddleware: config => {
            config.watchOptions = {
                poll: 1000,
                aggregateTimeout: 300
            }

        return config
        },
        sassOptions: {
            includePaths: [path.join(__dirname, 'styles')]
        },
        experimental: {
            images: {
                layoutRaw: true
            }
        },
        images: {
            /*unoptimized: true - for static export!*/
            /*deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
            formats: ['image/webp']*/
        }
        
    }

    module.exports = withBundleAnalyzer(withPWA({nextConfig}));

CodePudding user response：

My working solution was from here: https://stackoverflow.com/a/58182678/

I put a middleware.ts in the root-folder (right next to package.json, next.config.js etc).

And I wrote this inside:

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

export async function middleware(request: NextRequest) {

    /* /accessible-webdesign --> /for-disabled-persons */
    if (request.nextUrl.pathname.startsWith('/plain-language/accessible-webdesign')) {
        return NextResponse.redirect(new URL('/plain-language/for-disabled-persons', request.url));
    }

    /* /another-url --> /another-redirect */
    if (request.nextUrl.pathname.startsWith('/plain-language/another-url')) {
        return NextResponse.redirect(new URL('/plain-language/another-redirect', request.url));
    }
}

Not as beautiful, but working.