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}));