NextJs 14 : Routing
Tags: nextjs, tutorial, javascript, beginners
Published: 2024-03-28 18:47:13

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.

![NextJs Installation Default Option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j05423vmyexhr2nsulp4.png)

Let's now execute the app with `npm run dev`

![NextJs Web Default](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2l3utn18f0aeznipt61p.png)

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`

![File Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dijejj2l7vr36ubfwo98.png)

Let's create something inside `Hello/page.tsx`

```ts
export default function Hello() {
  return (
    <div className="h-screen flex justify-center items-center">
      <span className="text-4xl">Hello World Page</span>
    </div>
  );
}
```

![Hello World Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bzo9jjkbifu38v5sw38f.png)

and after that lets modify the page for `src/page.tsx`

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

![Home Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jndn3wa3kr4mscpd7mi6.png)

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.

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

```ts
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.

![Home Page With Redirection Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwpf9xdkfywiyg7riug8.png)

![Hello Page With Redirection Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9045pwrlcz7zheokgoht.png)

And that's it.
Now go and build your own webapps with Nextjs.
Happy Learning. :)