Before i move my layout.tsx
and page.tsx
files into [lang]
folder it looked like this
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]
innext.config.ts
async redirects() {
return [
{
source: '/',
destination: '/en',
},
]
},
https://nextjs.org/docs/pages/api-reference/next-config-js/redirects