Nextjs default route problem with [lang] folder

Before i move my layout.tsx and page.tsx files into [lang] folder it looked like this

enter image description here

Then i moved those two files into [lang] folder because i needed to take the locale params in my page.tsx. Everything worked fine except when i first run the website it doesnt redirect to /en/bootcamps as i configured here in page.tsx :

import { redirect } from "next/navigation";   const redirectToBootcamp = async () => {redirect(`en/bootcamps`);};export default async function Home({ params }: { params: { lang: string } }) { await redirectToBootcamp();return <main>{JSON.stringify(params)}</main>;}

it goes to / instead and gives me 404 error. How can i make it redirect where i want and still keep the layout and page files in [lang] folder.

>Solution :

Earlier you had app/page.tsx. That means / route will work fine.

Then you moved that file to app/[lang]/page.tsx, which means /[lang] route will work. But / wont work anympre.

For / to work, you need either:

  • app/page.tsx (just like you had earlier), or
  • create a redirect from / to /[lang] in next.config.ts
async redirects() {
    return [
        {
            source: '/',
            destination: '/en',
        },
    ]
},

https://nextjs.org/docs/pages/api-reference/next-config-js/redirects

Leave a Reply