*Hello, my name is Igor and if by chance, you enjoy what I write, you may also like what I have to say on [my Twitter profile](https://www.twitter.com/igorasilveira), come and say 'Hi! 👋'.*

This article is part of an entire Next.js series of articles that I am putting together to help you become a Next.js pro and start building blazing fast React apps, either static, client-rendered, server-rendered or a mix of both (but we will get to that later).

💡 If you don’t want to miss out on any of the tutorials, signup for my newsletter by [clicking here](https://www.getrevue.co/profile/igorasilveira) or head over to [DailyDev.io](https://dailydev.io/) for more.

On this issue, we will be learning about how Next.js makes it incredibly easy to navigate between pages within our application using *prefetching* ensuring our app is fast and secure.

<aside>
💡 You can find the source code for this project <a href="https://github.com/igorasilveira/blog-examples/tree/main/nextjs-basic-routing">here</a>.
</aside>

So let’s get started!

### Pre-requisites

- Node ≥ 12
- React Basics

## Creating a Next.js App

To kick this off, we need our very own freshly-built Next.js which we can get by simply running this command in the directory you wish to store all of your awesome Next.js projects.

```bash
npx create-next-app nextjs-basic-routing --use-npm --typescript
```

*A breakdown of what we just did:*

- `npx` - is a command-line interface tool that makes it easy to execute npm packages without actually installing them on your own machine.
- `create-next-app` - our best friend, will scaffold a perfectly balanced Next.js app for you.
- `nextjs-basic-routing` - this is the name I decided to give my project, feel free to mix it up a bit.
- `--use-npm` - this flag specifies that we want to use NPM as our dependency manager.
- `--typescript` - this flag tells the scaffolding tool that we want to generate a TypeScript project and it initializes all required dependencies (this is more of a personal preference of mine - ❤️ TypeScript).

## Running our App

Our Next.js project has been created and all dependencies automatically installed. We can now run it and see our app come to life!

In the same terminal we used to scaffold our project, we now `cd` into our project folder ie. `cd nextjs-basic-routing` and we run the following command to start our project in **development mode**.

```bash
npm run dev
```

After a couple of seconds, your Next.js app server is launched (hopefully with success) and you can now navigate to `http://localhost:3000` and reveal your Next.js app, similar to the one below.

![Screenshot 2022-02-17 at 07.48.19.png](https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd173ed60-2ba7-489d-8438-7550084f648a%2FScreenshot_2022-02-17_at_07.48.19.png?table=block&id=53b58050-c151-46dc-9da1-7148d5817894&spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&width=2000&userId=&cache=v2)

We are now open for business! 🥳

## Next.js Routing

Now that we have our application up and running, let’s start looking at how Next.js beautifully handles its pages and routing, starting by creating our very own new page.

### Pages

In Next.js, every page is a React Component that is exported from a file that lives in the `/pages` directory at the root of your project. The name of the file dictates the route it will be associated with, including the folder(s), if any, that the React Component is living in. There is a special filename that is associated with the **root** of your app, and that is the `index.tsx` file already came included with our initial scaffolding.

- `/pages/index.tsx` maps to the `/` route (our homepage)
- `/pages/dogs/a-doggo.tsx` maps to the `/dogs/a-doggo.tsx` route.

### Creating a new Page

So if we were to create that doggo page mapped to that specific route, I’d need to create a new folder within `/pages` and, inside that new folder, export a new React Component from a file named `a-doggo.tsx`. Your file tree would look something like this:

![Screenshot 2022-02-18 at 07.03.33.png](https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fde90c9d7-a2b4-47f1-ba74-57d2f642280f%2FScreenshot_2022-02-18_at_07.03.33.png?table=block&id=cb9d4ba9-6acb-4cb4-b1dd-75e77e56321f&spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&width=680&userId=&cache=v2)

(Don’t mind the `_app.tsx` file, for now, that is a special file)

The contents of the new file can be anything you wish, as long as it exports a default React Component that renders some JSX that Next.js can then render as HTML. For example, this is the code of my React Component.

```tsx
import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'

const Doggo: NextPage = () => {
  return (
    <div>
      <Head>
        <title>A Doggo</title>
      </Head>

      <main>
        <h1>
          This is a Doggo.
        </h1>

        <Image alt="This is a doggo" src='https://loremflickr.com/520/520/dog' width={520} height={520}/>
      </main>
    </div>
  )
}

export default Doggo
```

I wanted to have a random image of a doggo, so I used [https://loremflickr.com](https://loremflickr.com/), a nice tool for randomly generated assets. In order for this to work with Next.js, we need to add this domain as an image provider in the `next.config.js` file as below. 

(**NOTE:** this is optional and you can make your React Component show whatever you want and not use this image generator)

```jsx
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: [
      "loremflickr.com"  // <- added this
    ]
  }
}

module.exports = nextConfig
```

If we now run our server and navigate to `http://localhost:3000/dogs/a-doggo`, there will be a random image of a doggo for us to contemplate. 🐶

![Screenshot 2022-02-18 at 07.29.49.png](https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fc8f8c7c2-2c63-4919-91d9-c578097281ef%2FScreenshot_2022-02-18_at_07.29.49.png?table=block&id=d3940ba5-5c3b-4a47-81b2-f68ed839b28b&spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&width=2000&userId=&cache=v2)

### Navigating Static Routes

Our application now has two pages, and to navigate between them we have been manually changing our URL in the address bar. Let’s change that!

Normally, we link between pages on our own or external website using the `<a>` HTML tag. But Next.js builds on top of that. You can use the `Link` Component to wrap the `<a>` tag, allowing you to do **client-side navigation** to a different page in the application.

**Client-side navigation** means that the page transition happens using *JavaScript*, which is faster than the default browser navigation methods.

Another great benefit of using Next.js `Link` Component is that pages containing one or more `Link` Components will **prefetch** the code for the linked page in the background as soon as the `Link` becomes visible in the viewport. This allows for a faster initial page render as Next.js will only load the code for the page you requested and only load other linked pages when the `Link` Component is visible, and it does it in the background, not impacting the overall user experience and making the navigation extremely fast for a client-side application.

But how do we use it then? Well, it is pretty straightforward as using a normal `<a>` HTML tag would be. So let’s include a `Link` on our Homepage to go to our *doggo* page and another to get back home.

Replace your `/pages/index.tsx` code with the following:

```jsx
import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import Link from 'next/link'
import styles from '../styles/Home.module.css'

const Home: NextPage = () => {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>

        <p className={styles.description}>
          Let&apos;s check our <Link href="dogs/a-doggo">doggo</Link>.
        </p>

      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  )
}

export default Home
```

In your `/pages/a-doggo.tsx` replace your code with this one where we added a styled paragraph linking to our home page.

```jsx
import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import Link from 'next/link'

const Doggo: NextPage = () => {
  return (
    <div>
      <Head>
        <title>A Doggo</title>
      </Head>

      <main>
        <h1>
          This is a Doggo.
        </h1>

        <Image alt="This is a doggo" src='https://loremflickr.com/520/520/dog' width={520} height={520}/>
        <p style={{color: "#0070f3"}}><Link href="/">Back Home</Link></p>
      </main>
    </div>
  )
}

export default Doggo
```

And now we can easily navigate through our application’s pages 😎

![Screen Recording 2022-02-19 at 08.34.36.gif](https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fb9ca052a-8507-477c-b9f9-7bbb1dc74340%2FScreen_Recording_2022-02-19_at_08.34.36.gif?table=block&id=cc5f76c6-662b-4ca7-bbe2-47e533efcdb1&spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&userId=&cache=v2)

## Final Remarks

Now that you have a working Next.js app up and running, don't stop there. As a good exercise, go ahead and create more pages for your application (*ie. About Us, Contacts*) and more doggos. If you run into any trouble feel free to reach out to me on [Twitter](https://twitter.com/igorasilveira), my DMs are always open.

**Next Steps:** Keep an eye out for my following Next.js tutorials where we will go over *Dynamic Routes* and much more! If you don’t want to miss out on any of the tutorials, signup for my newsletter by [clicking here](https://www.getrevue.co/profile/igorasilveira).

<p><em>Hello, my name is Igor and if by chance, you enjoy what I write, you may also like what I have to say on <a href="https://www.twitter.com/igorasilveira">my Twitter profile</a>, come and say 'Hi! 👋'.</em></p>
<p>This article is part of an entire Next.js series of articles that I am putting together to help you become a Next.js pro and start building blazing fast React apps, either static, client-rendered, server-rendered or a mix of both (but we will get to that later).</p>
<p>💡 If you don’t want to miss out on any of the tutorials, signup for my newsletter by <a href="https://www.getrevue.co/profile/igorasilveira">clicking here</a> or head over to <a href="https://dailydev.io/">DailyDev.io</a> for more.</p>
<p>On this issue, we will be learning about how Next.js makes it incredibly easy to navigate between pages within our application using <em>prefetching</em> ensuring our app is fast and secure.</p>
<aside>
💡 You can find the source code for this project <a href="https://github.com/igorasilveira/blog-examples/tree/main/nextjs-basic-routing">here</a>.
</aside>
<p>So let’s get started!</p>
<h3>Pre-requisites</h3>
<ul>
<li>Node ≥ 12</li>
<li>React Basics</li>
</ul>
<h2>Creating a Next.js App</h2>
<p>To kick this off, we need our very own freshly-built Next.js which we can get by simply running this command in the directory you wish to store all of your awesome Next.js projects.</p>
<pre><code class="language-bash">npx create-next-app nextjs-basic-routing --use-npm --typescript
</code></pre>
<p><em>A breakdown of what we just did:</em></p>
<ul>
<li><code>npx</code> - is a command-line interface tool that makes it easy to execute npm packages without actually installing them on your own machine.</li>
<li><code>create-next-app</code> - our best friend, will scaffold a perfectly balanced Next.js app for you.</li>
<li><code>nextjs-basic-routing</code> - this is the name I decided to give my project, feel free to mix it up a bit.</li>
<li><code>--use-npm</code> - this flag specifies that we want to use NPM as our dependency manager.</li>
<li><code>--typescript</code> - this flag tells the scaffolding tool that we want to generate a TypeScript project and it initializes all required dependencies (this is more of a personal preference of mine - ❤️ TypeScript).</li>
</ul>
<h2>Running our App</h2>
<p>Our Next.js project has been created and all dependencies automatically installed. We can now run it and see our app come to life!</p>
<p>In the same terminal we used to scaffold our project, we now <code>cd</code> into our project folder ie. <code>cd nextjs-basic-routing</code> and we run the following command to start our project in <strong>development mode</strong>.</p>
<pre><code class="language-bash">npm run dev
</code></pre>
<p>After a couple of seconds, your Next.js app server is launched (hopefully with success) and you can now navigate to <code>http://localhost:3000</code> and reveal your Next.js app, similar to the one below.</p>
<p><img src="https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd173ed60-2ba7-489d-8438-7550084f648a%2FScreenshot_2022-02-17_at_07.48.19.png?table=block&#x26;id=53b58050-c151-46dc-9da1-7148d5817894&#x26;spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&#x26;width=2000&#x26;userId=&#x26;cache=v2" alt="Screenshot 2022-02-17 at 07.48.19.png"></p>
<p>We are now open for business! 🥳</p>
<h2>Next.js Routing</h2>
<p>Now that we have our application up and running, let’s start looking at how Next.js beautifully handles its pages and routing, starting by creating our very own new page.</p>
<h3>Pages</h3>
<p>In Next.js, every page is a React Component that is exported from a file that lives in the <code>/pages</code> directory at the root of your project. The name of the file dictates the route it will be associated with, including the folder(s), if any, that the React Component is living in. There is a special filename that is associated with the <strong>root</strong> of your app, and that is the <code>index.tsx</code> file already came included with our initial scaffolding.</p>
<ul>
<li><code>/pages/index.tsx</code> maps to the <code>/</code> route (our homepage)</li>
<li><code>/pages/dogs/a-doggo.tsx</code> maps to the <code>/dogs/a-doggo.tsx</code> route.</li>
</ul>
<h3>Creating a new Page</h3>
<p>So if we were to create that doggo page mapped to that specific route, I’d need to create a new folder within <code>/pages</code> and, inside that new folder, export a new React Component from a file named <code>a-doggo.tsx</code>. Your file tree would look something like this:</p>
<p><img src="https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fde90c9d7-a2b4-47f1-ba74-57d2f642280f%2FScreenshot_2022-02-18_at_07.03.33.png?table=block&#x26;id=cb9d4ba9-6acb-4cb4-b1dd-75e77e56321f&#x26;spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&#x26;width=680&#x26;userId=&#x26;cache=v2" alt="Screenshot 2022-02-18 at 07.03.33.png"></p>
<p>(Don’t mind the <code>_app.tsx</code> file, for now, that is a special file)</p>
<p>The contents of the new file can be anything you wish, as long as it exports a default React Component that renders some JSX that Next.js can then render as HTML. For example, this is the code of my React Component.</p>
<pre><code class="language-tsx">import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'

const Doggo: NextPage = () => {
  return (
    &#x3C;div>
      &#x3C;Head>
        &#x3C;title>A Doggo&#x3C;/title>
      &#x3C;/Head>

      &#x3C;main>
        &#x3C;h1>
          This is a Doggo.
        &#x3C;/h1>

        &#x3C;Image alt="This is a doggo" src='https://loremflickr.com/520/520/dog' width={520} height={520}/>
      &#x3C;/main>
    &#x3C;/div>
  )
}

export default Doggo
</code></pre>
<p>I wanted to have a random image of a doggo, so I used <a href="https://loremflickr.com/">https://loremflickr.com</a>, a nice tool for randomly generated assets. In order for this to work with Next.js, we need to add this domain as an image provider in the <code>next.config.js</code> file as below. </p>
<p>(<strong>NOTE:</strong> this is optional and you can make your React Component show whatever you want and not use this image generator)</p>
<pre><code class="language-jsx">const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: [
      "loremflickr.com"  // &#x3C;- added this
    ]
  }
}

module.exports = nextConfig
</code></pre>
<p>If we now run our server and navigate to <code>http://localhost:3000/dogs/a-doggo</code>, there will be a random image of a doggo for us to contemplate. 🐶</p>
<p><img src="https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fc8f8c7c2-2c63-4919-91d9-c578097281ef%2FScreenshot_2022-02-18_at_07.29.49.png?table=block&#x26;id=d3940ba5-5c3b-4a47-81b2-f68ed839b28b&#x26;spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&#x26;width=2000&#x26;userId=&#x26;cache=v2" alt="Screenshot 2022-02-18 at 07.29.49.png"></p>
<h3>Navigating Static Routes</h3>
<p>Our application now has two pages, and to navigate between them we have been manually changing our URL in the address bar. Let’s change that!</p>
<p>Normally, we link between pages on our own or external website using the <code>&#x3C;a></code> HTML tag. But Next.js builds on top of that. You can use the <code>Link</code> Component to wrap the <code>&#x3C;a></code> tag, allowing you to do <strong>client-side navigation</strong> to a different page in the application.</p>
<p><strong>Client-side navigation</strong> means that the page transition happens using <em>JavaScript</em>, which is faster than the default browser navigation methods.</p>
<p>Another great benefit of using Next.js <code>Link</code> Component is that pages containing one or more <code>Link</code> Components will <strong>prefetch</strong> the code for the linked page in the background as soon as the <code>Link</code> becomes visible in the viewport. This allows for a faster initial page render as Next.js will only load the code for the page you requested and only load other linked pages when the <code>Link</code> Component is visible, and it does it in the background, not impacting the overall user experience and making the navigation extremely fast for a client-side application.</p>
<p>But how do we use it then? Well, it is pretty straightforward as using a normal <code>&#x3C;a></code> HTML tag would be. So let’s include a <code>Link</code> on our Homepage to go to our <em>doggo</em> page and another to get back home.</p>
<p>Replace your <code>/pages/index.tsx</code> code with the following:</p>
<pre><code class="language-jsx">import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import Link from 'next/link'
import styles from '../styles/Home.module.css'

const Home: NextPage = () => {
  return (
    &#x3C;div className={styles.container}>
      &#x3C;Head>
        &#x3C;title>Create Next App&#x3C;/title>
        &#x3C;meta name="description" content="Generated by create next app" />
        &#x3C;link rel="icon" href="/favicon.ico" />
      &#x3C;/Head>

      &#x3C;main className={styles.main}>
        &#x3C;h1 className={styles.title}>
          Welcome to &#x3C;a href="https://nextjs.org">Next.js!&#x3C;/a>
        &#x3C;/h1>

        &#x3C;p className={styles.description}>
          Let&#x26;apos;s check our &#x3C;Link href="dogs/a-doggo">doggo&#x3C;/Link>.
        &#x3C;/p>

      &#x3C;/main>

      &#x3C;footer className={styles.footer}>
        &#x3C;a
          href="https://vercel.com?utm_source=create-next-app&#x26;utm_medium=default-template&#x26;utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          &#x3C;span className={styles.logo}>
            &#x3C;Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          &#x3C;/span>
        &#x3C;/a>
      &#x3C;/footer>
    &#x3C;/div>
  )
}

export default Home
</code></pre>
<p>In your <code>/pages/a-doggo.tsx</code> replace your code with this one where we added a styled paragraph linking to our home page.</p>
<pre><code class="language-jsx">import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import Link from 'next/link'

const Doggo: NextPage = () => {
  return (
    &#x3C;div>
      &#x3C;Head>
        &#x3C;title>A Doggo&#x3C;/title>
      &#x3C;/Head>

      &#x3C;main>
        &#x3C;h1>
          This is a Doggo.
        &#x3C;/h1>

        &#x3C;Image alt="This is a doggo" src='https://loremflickr.com/520/520/dog' width={520} height={520}/>
        &#x3C;p style={{color: "#0070f3"}}>&#x3C;Link href="/">Back Home&#x3C;/Link>&#x3C;/p>
      &#x3C;/main>
    &#x3C;/div>
  )
}

export default Doggo
</code></pre>
<p>And now we can easily navigate through our application’s pages 😎</p>
<p><img src="https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fb9ca052a-8507-477c-b9f9-7bbb1dc74340%2FScreen_Recording_2022-02-19_at_08.34.36.gif?table=block&#x26;id=cc5f76c6-662b-4ca7-bbe2-47e533efcdb1&#x26;spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&#x26;userId=&#x26;cache=v2" alt="Screen Recording 2022-02-19 at 08.34.36.gif"></p>
<h2>Final Remarks</h2>
<p>Now that you have a working Next.js app up and running, don't stop there. As a good exercise, go ahead and create more pages for your application (<em>ie. About Us, Contacts</em>) and more doggos. If you run into any trouble feel free to reach out to me on <a href="https://twitter.com/igorasilveira">Twitter</a>, my DMs are always open.</p>
<p><strong>Next Steps:</strong> Keep an eye out for my following Next.js tutorials where we will go over <em>Dynamic Routes</em> and much more! If you don’t want to miss out on any of the tutorials, signup for my newsletter by <a href="https://www.getrevue.co/profile/igorasilveira">clicking here</a>.</p>


Learn about how Next.js makes it incredibly easy to navigate between pages within our application using *prefetching* ensuring our app is fast and secure.

A Comprehensive Guide to NextJS Routing

NextJS

Web Dev

Authentication plays a major role in all systems around the globe in securing an application of any sort. In this article, I will show you how you can use Auth0 to secure your NextJS web application (including social login).

A Comprehensive Guide to NextJS Authentication with Auth0

Find all NextJS-related posts with comprehensive tutorials and snippets.