Next.js Redirect from / to another page

penguin_pam

I'm new in Next.js and I'm wondering how to redirect from the start page ( / ) to /hello-nextjs for example. Once the user loads a page, determine if path === / and redirect to /hello-nextjs if so. In react-router we do something like: <Switch> <Route path="/hello-nextjs" exact component={HelloNextjs} /> <Redirect to="/hello-nextjs" /> // or <Route path="/" exact render={() => <Redirect to="/hello-nextjs" />} /> </Switch>

Originally asked by Arthur on Stack Exchange (stackoverflow) (CC BY-SA 4.0).

uphilltech

Great question — answering as the UphillTech team:

Update: Next.js >= 13 with AppDir enabled You can use next/navigation to redirect both in client components and server components. Ex. in pages : import { redirect } from 'next/navigation'; export default async function Home({ params }) { redirect('/hello-nextjs'); // ... } Ex. In client components: 'use client'; import { useEffect } from 'react'; import { useRouter } from 'next/navigation'; export const Home= () => { const { push } = useRouter(); useEffect(() => { push('/hello-nextjs'); }, []); return <p></p>; }; Update: Next.js >= 12.1 As @warfield pointed out in his answer from next.js >= 12.1 relative URLs are no longer allowed in redirects and using them will throw an error. I'm...

Full answer by Nico: https://stackoverflow.stackexchange.com/a/58182678 (CC BY-SA 4.0).

Need it done for your business? UphillTech.