If you know React Router, grasping routing in Next.js will be straightforward for you.
What is Routing anyways?
Routing in NextJs refers to how the framework maps URLs to specific components in your application. It allows users to navigate between different sections of your app and keeps the URL in sync with the content being displayed.
How does it work?
Let's get started.
Let's create a Next.js project.
npx create-next-app@latest
We'll choose the default options.
Let's now execute the app with npm run dev
Fast forward to creating a routes.
After clearing the css make a folder inside src/app
name it anything you want. I'll make Hello
for this example.
After creating folder, inside make a new file with name page.tsx
or page.jsx
Let's create something inside Hello/page.tsx
export default function Hello() {
return (
<div className="h-screen flex justify-center items-center">
<span className="text-4xl">Hello World Page</span>
</div>
);
}
and after that lets modify the page for src/page.tsx
export default function Home() {
return (
<div className="h-screen flex flex-col justify-center items-center">
<span className="text-4xl">Home Page</span>
<button className="p-2 bg-teal-200 mt-2 rounded-xl">
Redirect to /Hello
</button>
</div>
);
}
We have already created our Router when we made our Hello/page.tsx
page. You can view it by entering /Hello
in the URL bar, like this: http://localhost:3000/Hello
. This will take you to the Hello/page.tsx
page or component.
Now for the final touchups we'll make a button that redirects to the component.
Home/page.tsx
import Link from "next/link";
export default function Hello() {
return (
<div className="h-screen flex flex-col justify-center items-center">
<span className="text-4xl">Hello World Page</span>
<button className="p-2 bg-teal-200 mt-2 rounded-xl">
<Link href="/">Redirect to /Home</Link>
</button>
</div>
);
}
app/page.tsx
import Link from "next/link";
export default function Home() {
return (
<div className="h-screen flex flex-col justify-center items-center">
<span className="text-4xl">Home Page</span>
<button className="p-2 bg-teal-200 mt-2 rounded-xl">
<Link href="/Hello">Redirect to /Hello</Link>
</button>
</div>
);
}
Here's the final output.
And that's it.
Now go and build your own webapps with Nextjs.
Happy Learning. :)
Top comments (0)