*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 I am putting together to help you become a Next.js pro and build blazing-fast React apps.

💡 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 talking about Next.js **Server-Side Rendering**, complementing the last video on the **pre-rendering** topic.

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

</aside>

So let’s get started!

Be sure to check out my previous articles on *Next.js pages*, *Dynamic Routing,* and *Static Site Generation* before continuing to better understand what we will be doing here.

## Quick Recap

The last time we were here, we introduced the concept of **pre-rendering**, the default method that Next.js uses to render its pages, resulting in better performance and less effort for the client, by serving the client with a pre-built HTML file bundled with the necessary JavaScript file to make it work.

![Untitled.001.jpeg](https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F44e3ff0c-b649-4854-a1f1-a0cdcdc41d83%2FUntitled.001.jpeg?table=block&id=38cbe8df-cfa2-4b9a-ac1f-941124568345&spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&width=2000&userId=&cache=v2)

We discussed that Next.js presented two main ways of pre-rendering: **Static Site Generation** and **Server-Side Rendering**. That time, we covered the former and updated our upcoming dog-searching app to reap the benefits of that Next.js feature, and on this one, we will be learning something new.

## Server-Side Rendering

**Server-Side Rendering** works on the same basis as **Static Site Generation** where the goal is to serve the client with a pre-built static HTML page that the server has pre-rendered and that is then hydrated by the bundled JavaScript file, restoring the page to its true interactive glory.

The main difference to retain between these two **pre-rendering** methods that Next.js ships with, is **when** the page’s HTML is pre-rendered.

**Static Site-**generated pages are pre-rendered at **build time** when the `next build` command is run. It is a case of generating and forgetting about them until a new build is necessary to reflect new changes.

On **Server-Side**-generated pages, however, the page’s HTML is generated on **each request** to the server. This means that the same page is rendered multiple times along the application’s lifetime. As many as it is requested (unless we use *caching*, more on that later).

![Pre-rendering.001.jpeg](https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fe127c7a2-1ba4-45a1-a245-b2bf8a931c5e%2FPre-rendering.001.jpeg?table=block&id=f44377e5-eb5d-42ab-a830-e7eea382131f&spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&width=2000&userId=&cache=v2)

As you can see, server-side rendered pages will be less performant than statically generated ones and cannot be stored on a CDN for faster global access.

However, sometimes **Server-Side Rendering** may be the only option. The main reason you might be looking into using **Server-Side Rendering** over **Static Site Generation** when creating a page is if that page needs to pre-render frequently updated data that must be fetched from some external data source and can’t, therefore, be statically generated at build time as it needs to always be up-to-date.

### How to Use It

Unless we specify that a page is to be either server-side rendered or statically rendered with data (check the previous article), Next.js won’t be able to tell the difference.

To do this, Next.js allows us to define specific **methods** within our page’s components that it will then evaluate and assess whether each page is to be pre-rendered at build time or on each request. 

Previously, we discussed the **Static Site Generation**-specific methods and **Server-Side Rendering** is no different.

To use **Server-Side Rendering** for a page, we export an `async` function named `getServerSideProps` from our page’s **React Component**. This is the function that the Next.js server will call on every request to this page.

This function will feed any data that we wish into our page component through its `props`, by having a very specific return type.

```tsx
function Doggo({ data }) {
  // Render data...
}

// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external data source
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

export default Doggo
```

And just like that, our page became server-side rendered and will always be up-to-date every time it is requested! 😎

## Updating our Dog App

Now let’s create a server-side rendered page within our Doggo App to see it in action.

For the purpose of this tutorial, we will create a page that will display a dog carousel whose data will be coming from the server every time we request that page.

<aside>
💡 NOTE: If you haven’t been following the creation of the Doggo App, you can checkout <a href="https://github.com/igorasilveira/blog-examples/tree/main/nextjs-static-generation">this GitHub repository</a> and modify it.

</aside>

### Creating our New Page

Let’s create a new file under the `/pages/dogs` directory called `carousel.tsx`.

Export a new **React Component** called `Carousel` that will receive a `data` object as component `props` that are typed with an `array` of our Dog `interface` created in the last article (check `/definitions/dogs.d.ts`).

Render some HTML in it and your component should look something like this:

```tsx
import type { NextPage } from "next";
import Link from "next/link";

const Carousel: NextPage<{ data: Dog[] }> = ({ data }) => {
  return (
    <div>
      <main>
        <h1>Carousel</h1>
        {/* Create carousel here */}
        <p style={{ color: "#0070f3" }}>
          <Link href="/">Back to Index</Link>
        </p>
      </main>
    </div>
  );
};

export default Carousel;
```

### Making it Server-Side Rendered

Now let’s add the magical function that makes this a server-side rendered page, the `getServerSideProps` function.

This function will fetch all dogs in our in-memory database that we created as a TypeScript file exporting an `array` (check `/db/dogs.ts`, we also added a few more entries for this tutorial), and return them as a randomly sorted list so that our newly created component can use it to create a “frequently” updated carousel.

<aside>
💡 Keep in mind that in a real-world scenario this would be an external API call that would probably handle more logic to generate the required data. But for the purpose of this tutorial, we will be simplifying the process in order to focus on the subject at hand, server-side rendering.

</aside>

Our function should be something similar to this:

```tsx
export const getServerSideProps: GetServerSideProps = async () => {
  // get a list of all dogs randomly sorted and limited to 2
  const data = [...dogs].sort(() => Math.random() - 0.5).slice(0, 2);

  return { props: { data } };
}
```

### Rendering the Data

Now that we have our component receiving data, we can take it and do whatever we please with it.

I’ll be creating a two-column `grid` and inside it, we go through each item on our `data` prop (that we know is a `Dog`) and we render their name and description on the screen. Of course, we also add some CSS just so that this doesn’t become a hot mess of HTML. 😉

Maybe something like this:

```tsx
const Carousel: NextPage<{ data: Dog[] }> = ({ data }) => {
  return (
    <div>
      <main>
        <h1>Carousel</h1>

        <div
          style={{
            width: "50%",
            display: "grid",
            gridTemplateColumns: "repeat(2, 1fr)",
          }}
        >
          {data.map((dog) => (
            <Link href={`/dogs/${dog.id}`} key={dog.id}>
              <div style={{
                border: "1px solid #ccc",
                cursor: "pointer",
              }}>
                <h2>{dog.name}</h2>
                <p>{dog.description}</p>
              </div>
            </Link>
          ))}
        </div>
        {/* For every dog in data array, display their name and description */}

        <p style={{ color: "#0070f3" }}>
          <Link href="/">Back to Index</Link>
        </p>
      </main>
    </div>
  );
};
```

### Final Result

So by the end, the page that can be found under `/dogs/carousel` should look something like this and be updated each time we request it with data fetched by the server. Cool! 😎

![ezgif.com-gif-maker (5).gif](https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ffbd48954-e102-4ea2-a60d-23bd5d4d9d93%2Fezgif.com-gif-maker_(5).gif?table=block&id=0348217a-5fa3-448a-a498-b27de1cc8322&spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&userId=&cache=v2)

## Final Remarks

To experience the differences between **Static Site Generation** and **Server-Side Rendering**, don’t forget to run the **build** command (`npm run build`) followed by **serving** (`npm run start`) the generated files. This is how the pages would be served in a production environment and cached by some CDN.

Running the project in `npm run dev` mode will always build all pages on each request, running all specific pre-rendering functions on all requests.

![Screenshot 2022-06-23 at 08.00.03.png](https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fe8a68fee-334d-483a-aa0f-012150946a8f%2FScreenshot_2022-06-23_at_08.00.03.png?table=block&id=a3e23f0f-6a6f-458c-95ca-9b0ef8688a99&spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&width=1830&userId=&cache=v2)

Notice how Next.js detected which pages were static or server-side rendered.

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 much more in Next.js territory! 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 I am putting together to help you become a Next.js pro and build blazing-fast React apps.</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 talking about Next.js <strong>Server-Side Rendering</strong>, complementing the last video on the <strong>pre-rendering</strong> topic.</p>
<aside>
  💡 You can find the source code for this project <a href="https://github.com/igorasilveira/blog-examples/tree/main/nextjs-server-side-rendering">here</a>.
</aside>
<p>So let’s get started!</p>
<p>Be sure to check out my previous articles on <em>Next.js pages</em>, <em>Dynamic Routing,</em> and <em>Static Site Generation</em> before continuing to better understand what we will be doing here.</p>
<h2>Quick Recap</h2>
<p>The last time we were here, we introduced the concept of <strong>pre-rendering</strong>, the default method that Next.js uses to render its pages, resulting in better performance and less effort for the client, by serving the client with a pre-built HTML file bundled with the necessary JavaScript file to make it work.</p>
<p><img src="https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F44e3ff0c-b649-4854-a1f1-a0cdcdc41d83%2FUntitled.001.jpeg?table=block&#x26;id=38cbe8df-cfa2-4b9a-ac1f-941124568345&#x26;spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&#x26;width=2000&#x26;userId=&#x26;cache=v2" alt="Untitled.001.jpeg"></p>
<p>We discussed that Next.js presented two main ways of pre-rendering: <strong>Static Site Generation</strong> and <strong>Server-Side Rendering</strong>. That time, we covered the former and updated our upcoming dog-searching app to reap the benefits of that Next.js feature, and on this one, we will be learning something new.</p>
<h2>Server-Side Rendering</h2>
<p><strong>Server-Side Rendering</strong> works on the same basis as <strong>Static Site Generation</strong> where the goal is to serve the client with a pre-built static HTML page that the server has pre-rendered and that is then hydrated by the bundled JavaScript file, restoring the page to its true interactive glory.</p>
<p>The main difference to retain between these two <strong>pre-rendering</strong> methods that Next.js ships with, is <strong>when</strong> the page’s HTML is pre-rendered.</p>
<p><strong>Static Site-</strong>generated pages are pre-rendered at <strong>build time</strong> when the <code>next build</code> command is run. It is a case of generating and forgetting about them until a new build is necessary to reflect new changes.</p>
<p>On <strong>Server-Side</strong>-generated pages, however, the page’s HTML is generated on <strong>each request</strong> to the server. This means that the same page is rendered multiple times along the application’s lifetime. As many as it is requested (unless we use <em>caching</em>, more on that later).</p>
<p><img src="https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fe127c7a2-1ba4-45a1-a245-b2bf8a931c5e%2FPre-rendering.001.jpeg?table=block&#x26;id=f44377e5-eb5d-42ab-a830-e7eea382131f&#x26;spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&#x26;width=2000&#x26;userId=&#x26;cache=v2" alt="Pre-rendering.001.jpeg"></p>
<p>As you can see, server-side rendered pages will be less performant than statically generated ones and cannot be stored on a CDN for faster global access.</p>
<p>However, sometimes <strong>Server-Side Rendering</strong> may be the only option. The main reason you might be looking into using <strong>Server-Side Rendering</strong> over <strong>Static Site Generation</strong> when creating a page is if that page needs to pre-render frequently updated data that must be fetched from some external data source and can’t, therefore, be statically generated at build time as it needs to always be up-to-date.</p>
<h3>How to Use It</h3>
<p>Unless we specify that a page is to be either server-side rendered or statically rendered with data (check the previous article), Next.js won’t be able to tell the difference.</p>
<p>To do this, Next.js allows us to define specific <strong>methods</strong> within our page’s components that it will then evaluate and assess whether each page is to be pre-rendered at build time or on each request. </p>
<p>Previously, we discussed the <strong>Static Site Generation</strong>-specific methods and <strong>Server-Side Rendering</strong> is no different.</p>
<p>To use <strong>Server-Side Rendering</strong> for a page, we export an <code>async</code> function named <code>getServerSideProps</code> from our page’s <strong>React Component</strong>. This is the function that the Next.js server will call on every request to this page.</p>
<p>This function will feed any data that we wish into our page component through its <code>props</code>, by having a very specific return type.</p>
<pre><code class="language-tsx">function Doggo({ data }) {
  // Render data...
}

// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external data source
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

export default Doggo
</code></pre>
<p>And just like that, our page became server-side rendered and will always be up-to-date every time it is requested! 😎</p>
<h2>Updating our Dog App</h2>
<p>Now let’s create a server-side rendered page within our Doggo App to see it in action.</p>
<p>For the purpose of this tutorial, we will create a page that will display a dog carousel whose data will be coming from the server every time we request that page.</p>
<aside>
💡 NOTE: If you haven’t been following the creation of the Doggo App, you can checkout <a href="https://github.com/igorasilveira/blog-examples/tree/main/nextjs-static-generation">this GitHub repository</a> and modify it.
</aside>
<h3>Creating our New Page</h3>
<p>Let’s create a new file under the <code>/pages/dogs</code> directory called <code>carousel.tsx</code>.</p>
<p>Export a new <strong>React Component</strong> called <code>Carousel</code> that will receive a <code>data</code> object as component <code>props</code> that are typed with an <code>array</code> of our Dog <code>interface</code> created in the last article (check <code>/definitions/dogs.d.ts</code>).</p>
<p>Render some HTML in it and your component should look something like this:</p>
<pre><code class="language-tsx">import type { NextPage } from "next";
import Link from "next/link";

const Carousel: NextPage&#x3C;{ data: Dog[] }> = ({ data }) => {
  return (
    &#x3C;div>
      &#x3C;main>
        &#x3C;h1>Carousel&#x3C;/h1>
        {/* Create carousel here */}
        &#x3C;p style={{ color: "#0070f3" }}>
          &#x3C;Link href="/">Back to Index&#x3C;/Link>
        &#x3C;/p>
      &#x3C;/main>
    &#x3C;/div>
  );
};

export default Carousel;
</code></pre>
<h3>Making it Server-Side Rendered</h3>
<p>Now let’s add the magical function that makes this a server-side rendered page, the <code>getServerSideProps</code> function.</p>
<p>This function will fetch all dogs in our in-memory database that we created as a TypeScript file exporting an <code>array</code> (check <code>/db/dogs.ts</code>, we also added a few more entries for this tutorial), and return them as a randomly sorted list so that our newly created component can use it to create a “frequently” updated carousel.</p>
<aside>
💡 Keep in mind that in a real-world scenario this would be an external API call that would probably handle more logic to generate the required data. But for the purpose of this tutorial, we will be simplifying the process in order to focus on the subject at hand, server-side rendering.
</aside>
<p>Our function should be something similar to this:</p>
<pre><code class="language-tsx">export const getServerSideProps: GetServerSideProps = async () => {
  // get a list of all dogs randomly sorted and limited to 2
  const data = [...dogs].sort(() => Math.random() - 0.5).slice(0, 2);

  return { props: { data } };
}
</code></pre>
<h3>Rendering the Data</h3>
<p>Now that we have our component receiving data, we can take it and do whatever we please with it.</p>
<p>I’ll be creating a two-column <code>grid</code> and inside it, we go through each item on our <code>data</code> prop (that we know is a <code>Dog</code>) and we render their name and description on the screen. Of course, we also add some CSS just so that this doesn’t become a hot mess of HTML. 😉</p>
<p>Maybe something like this:</p>
<pre><code class="language-tsx">const Carousel: NextPage&#x3C;{ data: Dog[] }> = ({ data }) => {
  return (
    &#x3C;div>
      &#x3C;main>
        &#x3C;h1>Carousel&#x3C;/h1>

        &#x3C;div
          style={{
            width: "50%",
            display: "grid",
            gridTemplateColumns: "repeat(2, 1fr)",
          }}
        >
          {data.map((dog) => (
            &#x3C;Link href={`/dogs/${dog.id}`} key={dog.id}>
              &#x3C;div style={{
                border: "1px solid #ccc",
                cursor: "pointer",
              }}>
                &#x3C;h2>{dog.name}&#x3C;/h2>
                &#x3C;p>{dog.description}&#x3C;/p>
              &#x3C;/div>
            &#x3C;/Link>
          ))}
        &#x3C;/div>
        {/* For every dog in data array, display their name and description */}

        &#x3C;p style={{ color: "#0070f3" }}>
          &#x3C;Link href="/">Back to Index&#x3C;/Link>
        &#x3C;/p>
      &#x3C;/main>
    &#x3C;/div>
  );
};
</code></pre>
<h3>Final Result</h3>
<p>So by the end, the page that can be found under <code>/dogs/carousel</code> should look something like this and be updated each time we request it with data fetched by the server. Cool! 😎</p>
<p><img src="https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ffbd48954-e102-4ea2-a60d-23bd5d4d9d93%2Fezgif.com-gif-maker_(5).gif?table=block&#x26;id=0348217a-5fa3-448a-a498-b27de1cc8322&#x26;spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&#x26;userId=&#x26;cache=v2" alt="ezgif.com-gif-maker (5).gif"></p>
<h2>Final Remarks</h2>
<p>To experience the differences between <strong>Static Site Generation</strong> and <strong>Server-Side Rendering</strong>, don’t forget to run the <strong>build</strong> command (<code>npm run build</code>) followed by <strong>serving</strong> (<code>npm run start</code>) the generated files. This is how the pages would be served in a production environment and cached by some CDN.</p>
<p>Running the project in <code>npm run dev</code> mode will always build all pages on each request, running all specific pre-rendering functions on all requests.</p>
<p><img src="https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fe8a68fee-334d-483a-aa0f-012150946a8f%2FScreenshot_2022-06-23_at_08.00.03.png?table=block&#x26;id=a3e23f0f-6a6f-458c-95ca-9b0ef8688a99&#x26;spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&#x26;width=1830&#x26;userId=&#x26;cache=v2" alt="Screenshot 2022-06-23 at 08.00.03.png"></p>
<p>Notice how Next.js detected which pages were static or server-side rendered.</p>
<p>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 much more in Next.js territory! 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>


On this issue, we will be talking about Next.js Server-Side Rendering, enabling high-performant websites by pre-rendering HTML instead of having it all done by client-side JavaScript.

Next.js Server-Side Rendering Practical Example

NextJS

Web Dev

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.

💡 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 enables high-performant websites by pre-rendering every page by default instead of having it all done by client-side JavaScript, like regular React apps usually do.

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

</aside>

So let’s get started!

### Pre-requisites

- Node ≥ 12
- React Basics

## Quick Recap

Up to this point, we have been talking about the concept of pages, how to represent them within our Next.js project, and how to make them either static or dynamic so that Next.js would know how to render and match specific URLs to their corresponding React components.

We then fired up our development server by running `npm run dev` and waited for a browser window to pop up with our app running at `http://localhost:3000`. Great! 👍 

But one thing we have not done is dive deeper into how Next.js is assembling those pages and serving them back to us when we visit some URL. And better yet, how the production build of our app differs from the development environment we are running locally. **And this is really where Next.js shines.**

## Pre-rendering

“What is pre-rendering?” you might ask. Pre-rendering is the act of taking a page in the application and generating the plain HTML for it beforehand, instead of letting the client-side handle the bulk of the work. The HTML is then also shipped with minimal JavaScript code that will run in the client and that is necessary to make that page fully interactive.

![Untitled.001.jpeg](https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F44e3ff0c-b649-4854-a1f1-a0cdcdc41d83%2FUntitled.001.jpeg?table=block&id=00be56c3-c973-4f70-b7f5-55c6c5eb2d66&spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&width=2000&userId=&cache=v2)

This process helps solve two of the main downsides normally associated with React apps and general Single Page Applications (SPAs):

- shockingly **low Search Engine Optimization** (SEO) capabilities, since all pages and transitions are handled by the client through JavaScript code and, therefore, not crawlable by Search Engines
- **heavy loads for the clients** as they have to download and run the entire application on the browser which quickly presented problems as the applications became larger and more interactive

## How Next.js Handles Pre-Rendering

Next.js will pre-render every page, by default. And it can happen in two different ways, the difference is **when** it generates the HTML for a page:

- **Static Generation:** The HTML is generated at **build** **time** and is reused on every request for that page.
- **Server-side** **Rendering (for another article):** The HTML for a page is generated on **each request**.

Both of these options will offer the benefits we discussed in the previous section but they can be used for different use cases upon different needs and you can even develop *hybrid* approaches within the same application by statically generating most pages and server-side rendering others.

The best and most performant choice for serving a web application is by statically generating all the application’s pages since they can be easily cached in a *Content Delivery Network* (CDN) and boost performance by serving them closest to the requesting client. However, in some cases, Server-side Rendering might be the only option.

For now, let’s take a look at how you can achieve Static Generation within or dog app.

### Static Generation

Using Static Generation, the HTML for a page is generated at **build time** when we run the `next build` command. That generated HTML is then served and reused whenever the page is requested.

There are two ways to statically generate pages, **with or without data** from external sources.

#### Static Generation without data

This is the most basic use case for a Next.js page, as it is the default behavior of the framework. 

A simple component exported from a file in the `pages` folder that does not need to fetch any external data before being pre-rendered generates a single HTML file during the build time.

An example would be the individual dog pages we created in our first tutorial on Next.js Basic Routing:

```tsx
const Doggo: NextPage = () => {
  return (
    <div>
      <main>
        <h1>
          This is a Doggo.
        </h1>

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

export default Doggo;
```

#### Static Generation with Data

Then there is Static Generation dependent on fetching external data for pre-rendering. You can imagine two different use cases for needing to fetch external data for rendering pages:

1. Your page **content** depends on external data.
2. Your page **paths** (existing routes) depend on external data.

**Scenario 1**

We can think of an example within our doggo app where our page content will depend on external data. We made our page dynamic in the last tutorial, so all dogs are rendered by the same React Component. But all dogs have different information to be rendered on the page, therefore, the pages for each dog have distinct content.

Let’s assume the following snippet of our updated dog page:

```tsx
// Need to get a dog from the API
const Doggo: NextPage = ({ dog }) => {
  return (
    <div>
        <h1>This is a {dog.name}.</h1>

        <Image
          alt="This is a doggo"
          src={dog.imageURL}
          width={520}
          height={520}
        />

        <p>{dog.description}</p>
    </div>
  );
};

export default Doggo;
```

To render each dog page with the correct data, we need to provide that specific dog data to our React Component.

To do this in Next.js, we will export an `async` function with a specific name, `getStaticProps` within the same page where the React Component representing the page is exported. This function will be called at build time when pre-rendering the page, and you can pass the necessary fetched data to the page’s `props`.

```tsx
const Doggo: NextPage = ({ dog }) => {
  ...
};

// This function gets called at build time
export const getStaticProps: GetStaticProps = async () => {
  // Call an external API endpoint to get a dog
  const res = await fetch("https://.../dogs/a-doggo");
  const dog = await res.json();

  // By returning { props: { dog } }, the Doggo component
  // will receive `dog` as a prop at build time
  return {
    props: {
      dog,
    },
  };
}

export default Doggo;
```

**Scenario 2**

Last time, we created a **dynamic page** within our app that enabled **dynamic routes**. With that, our app started responding to all requests for pages under `/dogs/:id`. But instead of only exposing routes for existing dog *ids*, our application is matching every id, so it will never return a *404 - Not Found* under that route.

In a real-world scenario, this does not make much sense. We would only want to render and serve pages for specific and individual resources that exist within our database.

So our page **paths** depend on external data and should be pre-rendered. Similar to before, Next.js allows you to declare a specific function within your page component’s file, whose sole purpose is to return a list of **paths** that this **dynamic page** should be rendered on, `getStaticPaths`. This function also gets called at build time.

```tsx
// This function gets called at build time
export const getStaticPaths: GetStaticPaths = async () => {
  // Call an external API endpoint to get dogs
  const res = await fetch("https://.../dogs");
  const dogs = await res.json();

  // Get the paths we want to pre-render based on dogs
  const paths = dogs.map((dog: any) => ({
    params: { id: dog.id },
  }));

  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should 404.
  return { paths, fallback: false };
}

export default Doggo;
```

Now `getStaticPaths` and `getStaticProps` can work together to pre-render all pages for existing dogs, based on a single dynamic React Component.

## Updating our Dog App

Now it is time to see this in action and power up our previously created **dynamic page** so that it can reach its full potential.

### Creating a Dog Interface

Since we are using TypeScript to ensure type safety and easy development, we should make use of it and create an `interface` to represent our dog and facilitate its usage through the app.

Let’s create a new `/definitions` folder to store our definitions files and create a `dogs.d.ts` file with the following content, and now we have a simple representation of our dog object.

```tsx
interface Dog {
    id: number;
    name: string;
    description: string;
}
```

### Creating our Dog Database

For simplicity, we will be creating a small in-memory structure to store our dogs and their information, so that Next.js can then access them and pre-rendered all the individual pages.

Let’s create a `/db` folder where we can store all our in-memory structures of data for ease of access. Inside we will create a `dogs.ts` file and populate it with some structure data of some dogs using our previously created `interface`.

```tsx
export const dogs: Dog[] = [
    {
        id: 1,
        name: 'Fido',
        description: 'A friendly dog',
    },
    {
        id: 2,
        name: 'Rex',
        description: 'A big dog',
    },
    {
        id: 3,
        name: 'Spot',
        description: 'A small dog',
    }
]
```

### Updating our Dog Page Component

We will make some updates to our page component in order for it to become 100% dynamic, namely:

- Remove the use of the Next.js Router: Next.js will be giving us all the necessary information through the component `props`.
- Create the `getStaticPaths` function to generate a list of string-based **paths** that represent only our available dogs.
- Create the `getStaticProps` function to fetch the respective dog based on the information received in the `params`.
- Update our page content to use the dog information present on the `dog` prop is it now receiving from `getStaticProps`.

By the end, our React Component should look something like this:

```tsx
import type { GetStaticPaths, GetStaticProps, NextPage } from "next";
import Link from "next/link";

import { dogs as dogsDB } from "../../db/dogs";

const Doggo: NextPage<{ dog: Dog }> = ({ dog }) => {
  return (
    <div>
      <main>
        <h1>This is {dog.name}.</h1>
        <p>{dog.description}</p>

        <p style={{ color: "#0070f3" }}>
          <Link href="/dogs">Back to Dogs</Link>
        </p>
      </main>
    </div>
  );
};

export const getStaticProps: GetStaticProps = async ({ params }) => {
  if (!params || !params.id) {
    return { props: {} };
  }

  const dog = dogsDB.find((dog) => dog.id === parseInt(params.id as string));

  return {
    props: {
      dog,
    },
  };
};

export const getStaticPaths: GetStaticPaths = async () => {
  const dogs = dogsDB;
  const paths = dogs.map((dog: Dog) => ({
    params: { id: dog.id.toString() },
  }));

  return { paths, fallback: false };
};

export default Doggo;
```

### Final Touch: Update Dogs Index Page

Just to end this on a high note, let’s update our dogs’ `index.tsx` page so that it will list all existing dogs and link to their individual pages.

The same principles apply here, but since it is only a single non-dynamic page, we only use `getStaticProps` and pass the dog list as `props` to the page so that it can render the list.

```tsx
import type { GetStaticProps, NextPage } from "next";
import Head from "next/head";
import Link from "next/link";

import { dogs as dogsDB } from "../../db/dogs";

const Doggo: NextPage<{ dogs: Dog[] }> = ({ dogs }) => {
  return (
    <div>
      <Head>
        <title>Our Doggos</title>
      </Head>

      <main>
        <h1>Check out our doggos.</h1>

        <ul style={{ color: "#0070f3" }}>
          {dogs.map((dog) => (
            <li key={dog.id}>
              <Link href={`/dogs/${dog.id}`}>{dog.name}</Link>
            </li>
          ))}
        </ul>

        <p style={{ color: "#0070f3" }}>
          <Link href="/">Back Home</Link>
        </p>
      </main>
    </div>
  );
};

export const getStaticProps: GetStaticProps = async () => {
  const dogs = dogsDB;

  return {
    props: {
      dogs,
    },
  };
};

export default Doggo;
```

### Final Result

By the end, your app should look something like this. Pretty neat! 😎

![ezgif.com-gif-maker (3).gif](https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F4f70556d-4e07-4533-86cc-299482ea5d0e%2Fezgif.com-gif-maker_(3).gif?table=block&id=e311b653-adc3-4f64-a1fa-7ee12c360165&spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&userId=&cache=v2)

## Final Remarks

To experience the full power and speed of Static Generation, don’t forget to run the **build** command (`npm run build`) followed by **serving** (`npm run start`) the generated files. This is how the pages would be served in a production environment and cached by some CDN.

Running the project in `npm run dev` mode will always build all pages on each request.

![Screenshot 2022-06-14 at 22.33.50.png](https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F15bbe6a7-5af0-4e07-9777-4ffe9121f249%2FScreenshot_2022-06-14_at_22.33.50.png?table=block&id=2b99a911-147f-482d-86c7-43069c9a5d90&spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&width=2000&userId=&cache=v2)

Notice how Next.js detected which pages were static and dependent on external data, generating exactly the routes defined by our in-memory database.

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 much more in Next.js territory! 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>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.</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 enables high-performant websites by pre-rendering every page by default instead of having it all done by client-side JavaScript, like regular React apps usually do.</p>
<aside>
  💡 You can find the source code for this project <a href="https://github.com/igorasilveira/blog-examples/tree/main/nextjs-static-generation">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>Quick Recap</h2>
<p>Up to this point, we have been talking about the concept of pages, how to represent them within our Next.js project, and how to make them either static or dynamic so that Next.js would know how to render and match specific URLs to their corresponding React components.</p>
<p>We then fired up our development server by running <code>npm run dev</code> and waited for a browser window to pop up with our app running at <code>http://localhost:3000</code>. Great! 👍 </p>
<p>But one thing we have not done is dive deeper into how Next.js is assembling those pages and serving them back to us when we visit some URL. And better yet, how the production build of our app differs from the development environment we are running locally. <strong>And this is really where Next.js shines.</strong></p>
<h2>Pre-rendering</h2>
<p>“What is pre-rendering?” you might ask. Pre-rendering is the act of taking a page in the application and generating the plain HTML for it beforehand, instead of letting the client-side handle the bulk of the work. The HTML is then also shipped with minimal JavaScript code that will run in the client and that is necessary to make that page fully interactive.</p>
<p><img src="https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F44e3ff0c-b649-4854-a1f1-a0cdcdc41d83%2FUntitled.001.jpeg?table=block&#x26;id=00be56c3-c973-4f70-b7f5-55c6c5eb2d66&#x26;spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&#x26;width=2000&#x26;userId=&#x26;cache=v2" alt="Untitled.001.jpeg"></p>
<p>This process helps solve two of the main downsides normally associated with React apps and general Single Page Applications (SPAs):</p>
<ul>
<li>shockingly <strong>low Search Engine Optimization</strong> (SEO) capabilities, since all pages and transitions are handled by the client through JavaScript code and, therefore, not crawlable by Search Engines</li>
<li><strong>heavy loads for the clients</strong> as they have to download and run the entire application on the browser which quickly presented problems as the applications became larger and more interactive</li>
</ul>
<h2>How Next.js Handles Pre-Rendering</h2>
<p>Next.js will pre-render every page, by default. And it can happen in two different ways, the difference is <strong>when</strong> it generates the HTML for a page:</p>
<ul>
<li><strong>Static Generation:</strong> The HTML is generated at <strong>build</strong> <strong>time</strong> and is reused on every request for that page.</li>
<li><strong>Server-side</strong> <strong>Rendering (for another article):</strong> The HTML for a page is generated on <strong>each request</strong>.</li>
</ul>
<p>Both of these options will offer the benefits we discussed in the previous section but they can be used for different use cases upon different needs and you can even develop <em>hybrid</em> approaches within the same application by statically generating most pages and server-side rendering others.</p>
<p>The best and most performant choice for serving a web application is by statically generating all the application’s pages since they can be easily cached in a <em>Content Delivery Network</em> (CDN) and boost performance by serving them closest to the requesting client. However, in some cases, Server-side Rendering might be the only option.</p>
<p>For now, let’s take a look at how you can achieve Static Generation within or dog app.</p>
<h3>Static Generation</h3>
<p>Using Static Generation, the HTML for a page is generated at <strong>build time</strong> when we run the <code>next build</code> command. That generated HTML is then served and reused whenever the page is requested.</p>
<p>There are two ways to statically generate pages, <strong>with or without data</strong> from external sources.</p>
<h4>Static Generation without data</h4>
<p>This is the most basic use case for a Next.js page, as it is the default behavior of the framework. </p>
<p>A simple component exported from a file in the <code>pages</code> folder that does not need to fetch any external data before being pre-rendered generates a single HTML file during the build time.</p>
<p>An example would be the individual dog pages we created in our first tutorial on Next.js Basic Routing:</p>
<pre><code class="language-tsx">const Doggo: NextPage = () => {
  return (
    &#x3C;div>
      &#x3C;main>
        &#x3C;h1>
          This is a Doggo.
        &#x3C;/h1>

        &#x3C;Image alt="This is a doggo" src='google.com' 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>
<h4>Static Generation with Data</h4>
<p>Then there is Static Generation dependent on fetching external data for pre-rendering. You can imagine two different use cases for needing to fetch external data for rendering pages:</p>
<ol>
<li>Your page <strong>content</strong> depends on external data.</li>
<li>Your page <strong>paths</strong> (existing routes) depend on external data.</li>
</ol>
<p><strong>Scenario 1</strong></p>
<p>We can think of an example within our doggo app where our page content will depend on external data. We made our page dynamic in the last tutorial, so all dogs are rendered by the same React Component. But all dogs have different information to be rendered on the page, therefore, the pages for each dog have distinct content.</p>
<p>Let’s assume the following snippet of our updated dog page:</p>
<pre><code class="language-tsx">// Need to get a dog from the API
const Doggo: NextPage = ({ dog }) => {
  return (
    &#x3C;div>
        &#x3C;h1>This is a {dog.name}.&#x3C;/h1>

        &#x3C;Image
          alt="This is a doggo"
          src={dog.imageURL}
          width={520}
          height={520}
        />

        &#x3C;p>{dog.description}&#x3C;/p>
    &#x3C;/div>
  );
};

export default Doggo;
</code></pre>
<p>To render each dog page with the correct data, we need to provide that specific dog data to our React Component.</p>
<p>To do this in Next.js, we will export an <code>async</code> function with a specific name, <code>getStaticProps</code> within the same page where the React Component representing the page is exported. This function will be called at build time when pre-rendering the page, and you can pass the necessary fetched data to the page’s <code>props</code>.</p>
<pre><code class="language-tsx">const Doggo: NextPage = ({ dog }) => {
  ...
};

// This function gets called at build time
export const getStaticProps: GetStaticProps = async () => {
  // Call an external API endpoint to get a dog
  const res = await fetch("https://.../dogs/a-doggo");
  const dog = await res.json();

  // By returning { props: { dog } }, the Doggo component
  // will receive `dog` as a prop at build time
  return {
    props: {
      dog,
    },
  };
}

export default Doggo;
</code></pre>
<p><strong>Scenario 2</strong></p>
<p>Last time, we created a <strong>dynamic page</strong> within our app that enabled <strong>dynamic routes</strong>. With that, our app started responding to all requests for pages under <code>/dogs/:id</code>. But instead of only exposing routes for existing dog <em>ids</em>, our application is matching every id, so it will never return a <em>404 - Not Found</em> under that route.</p>
<p>In a real-world scenario, this does not make much sense. We would only want to render and serve pages for specific and individual resources that exist within our database.</p>
<p>So our page <strong>paths</strong> depend on external data and should be pre-rendered. Similar to before, Next.js allows you to declare a specific function within your page component’s file, whose sole purpose is to return a list of <strong>paths</strong> that this <strong>dynamic page</strong> should be rendered on, <code>getStaticPaths</code>. This function also gets called at build time.</p>
<pre><code class="language-tsx">// This function gets called at build time
export const getStaticPaths: GetStaticPaths = async () => {
  // Call an external API endpoint to get dogs
  const res = await fetch("https://.../dogs");
  const dogs = await res.json();

  // Get the paths we want to pre-render based on dogs
  const paths = dogs.map((dog: any) => ({
    params: { id: dog.id },
  }));

  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should 404.
  return { paths, fallback: false };
}

export default Doggo;
</code></pre>
<p>Now <code>getStaticPaths</code> and <code>getStaticProps</code> can work together to pre-render all pages for existing dogs, based on a single dynamic React Component.</p>
<h2>Updating our Dog App</h2>
<p>Now it is time to see this in action and power up our previously created <strong>dynamic page</strong> so that it can reach its full potential.</p>
<h3>Creating a Dog Interface</h3>
<p>Since we are using TypeScript to ensure type safety and easy development, we should make use of it and create an <code>interface</code> to represent our dog and facilitate its usage through the app.</p>
<p>Let’s create a new <code>/definitions</code> folder to store our definitions files and create a <code>dogs.d.ts</code> file with the following content, and now we have a simple representation of our dog object.</p>
<pre><code class="language-tsx">interface Dog {
    id: number;
    name: string;
    description: string;
}
</code></pre>
<h3>Creating our Dog Database</h3>
<p>For simplicity, we will be creating a small in-memory structure to store our dogs and their information, so that Next.js can then access them and pre-rendered all the individual pages.</p>
<p>Let’s create a <code>/db</code> folder where we can store all our in-memory structures of data for ease of access. Inside we will create a <code>dogs.ts</code> file and populate it with some structure data of some dogs using our previously created <code>interface</code>.</p>
<pre><code class="language-tsx">export const dogs: Dog[] = [
    {
        id: 1,
        name: 'Fido',
        description: 'A friendly dog',
    },
    {
        id: 2,
        name: 'Rex',
        description: 'A big dog',
    },
    {
        id: 3,
        name: 'Spot',
        description: 'A small dog',
    }
]
</code></pre>
<h3>Updating our Dog Page Component</h3>
<p>We will make some updates to our page component in order for it to become 100% dynamic, namely:</p>
<ul>
<li>Remove the use of the Next.js Router: Next.js will be giving us all the necessary information through the component <code>props</code>.</li>
<li>Create the <code>getStaticPaths</code> function to generate a list of string-based <strong>paths</strong> that represent only our available dogs.</li>
<li>Create the <code>getStaticProps</code> function to fetch the respective dog based on the information received in the <code>params</code>.</li>
<li>Update our page content to use the dog information present on the <code>dog</code> prop is it now receiving from <code>getStaticProps</code>.</li>
</ul>
<p>By the end, our React Component should look something like this:</p>
<pre><code class="language-tsx">import type { GetStaticPaths, GetStaticProps, NextPage } from "next";
import Link from "next/link";

import { dogs as dogsDB } from "../../db/dogs";

const Doggo: NextPage&#x3C;{ dog: Dog }> = ({ dog }) => {
  return (
    &#x3C;div>
      &#x3C;main>
        &#x3C;h1>This is {dog.name}.&#x3C;/h1>
        &#x3C;p>{dog.description}&#x3C;/p>

        &#x3C;p style={{ color: "#0070f3" }}>
          &#x3C;Link href="/dogs">Back to Dogs&#x3C;/Link>
        &#x3C;/p>
      &#x3C;/main>
    &#x3C;/div>
  );
};

export const getStaticProps: GetStaticProps = async ({ params }) => {
  if (!params || !params.id) {
    return { props: {} };
  }

  const dog = dogsDB.find((dog) => dog.id === parseInt(params.id as string));

  return {
    props: {
      dog,
    },
  };
};

export const getStaticPaths: GetStaticPaths = async () => {
  const dogs = dogsDB;
  const paths = dogs.map((dog: Dog) => ({
    params: { id: dog.id.toString() },
  }));

  return { paths, fallback: false };
};

export default Doggo;
</code></pre>
<h3>Final Touch: Update Dogs Index Page</h3>
<p>Just to end this on a high note, let’s update our dogs’ <code>index.tsx</code> page so that it will list all existing dogs and link to their individual pages.</p>
<p>The same principles apply here, but since it is only a single non-dynamic page, we only use <code>getStaticProps</code> and pass the dog list as <code>props</code> to the page so that it can render the list.</p>
<pre><code class="language-tsx">import type { GetStaticProps, NextPage } from "next";
import Head from "next/head";
import Link from "next/link";

import { dogs as dogsDB } from "../../db/dogs";

const Doggo: NextPage&#x3C;{ dogs: Dog[] }> = ({ dogs }) => {
  return (
    &#x3C;div>
      &#x3C;Head>
        &#x3C;title>Our Doggos&#x3C;/title>
      &#x3C;/Head>

      &#x3C;main>
        &#x3C;h1>Check out our doggos.&#x3C;/h1>

        &#x3C;ul style={{ color: "#0070f3" }}>
          {dogs.map((dog) => (
            &#x3C;li key={dog.id}>
              &#x3C;Link href={`/dogs/${dog.id}`}>{dog.name}&#x3C;/Link>
            &#x3C;/li>
          ))}
        &#x3C;/ul>

        &#x3C;p style={{ color: "#0070f3" }}>
          &#x3C;Link href="/">Back Home&#x3C;/Link>
        &#x3C;/p>
      &#x3C;/main>
    &#x3C;/div>
  );
};

export const getStaticProps: GetStaticProps = async () => {
  const dogs = dogsDB;

  return {
    props: {
      dogs,
    },
  };
};

export default Doggo;
</code></pre>
<h3>Final Result</h3>
<p>By the end, your app should look something like this. Pretty neat! 😎</p>
<p><img src="https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F4f70556d-4e07-4533-86cc-299482ea5d0e%2Fezgif.com-gif-maker_(3).gif?table=block&#x26;id=e311b653-adc3-4f64-a1fa-7ee12c360165&#x26;spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&#x26;userId=&#x26;cache=v2" alt="ezgif.com-gif-maker (3).gif"></p>
<h2>Final Remarks</h2>
<p>To experience the full power and speed of Static Generation, don’t forget to run the <strong>build</strong> command (<code>npm run build</code>) followed by <strong>serving</strong> (<code>npm run start</code>) the generated files. This is how the pages would be served in a production environment and cached by some CDN.</p>
<p>Running the project in <code>npm run dev</code> mode will always build all pages on each request.</p>
<p><img src="https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F15bbe6a7-5af0-4e07-9777-4ffe9121f249%2FScreenshot_2022-06-14_at_22.33.50.png?table=block&#x26;id=2b99a911-147f-482d-86c7-43069c9a5d90&#x26;spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&#x26;width=2000&#x26;userId=&#x26;cache=v2" alt="Screenshot 2022-06-14 at 22.33.50.png"></p>
<p>Notice how Next.js detected which pages were static and dependent on external data, generating exactly the routes defined by our in-memory database.</p>
<p>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 much more in Next.js territory! 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>


On this issue, we will be learning about how Next.js enables high-performant websites by pre-rendering every page by default instead of having it all done by client-side JavaScript, like regular React apps usually do.

Next.js Static Site Generation Practical Example

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.

💡 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 allows us to easily create dynamic pages from a single React component following.

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

</aside>

So let’s get started!

### Pre-requisites

- Node ≥ 12
- React Basics

## Quick Recap

The last time we were here, we created a basic web app to better understand the basics of how to build an app with Next.js.

We introduced the concept of `pages` and how Next.js expects us to scaffold our application and our `React` components in order for it to automatically create and manage page URLs and transitions.

If you missed that introductory issue, I highly recommend you to check it out <insert link here> before continuing.

### 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.

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

The new file's contents 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.

## Generating our Project

To kick this off, we will create our Next.js project to host this app by running this command in the directory you wish to store all of your awesome Next.js projects.

```bash
npx create-next-app nextjs-dynamic-routing --use-npm --typescript -e https://github.com/igorasilveira/blog-examples/tree/main/nextjs-basic-routing
```

*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-dynamic-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).
- `-e` - this option specifies an example to bootstrap the app with. In this case, we are using the GitHub repository from the previous issue so that we can continue building our app from where we left off.

## 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! To do so, in the same terminal we used to generate the project, we now `cd` into our project folder and 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 check our doggo-based app! 🐶

![Screenshot 2022-04-20 at 16.00.06.png](https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fece26bb6-6d1e-4545-b209-08cb8ead4ccd%2FScreenshot_2022-04-20_at_16.00.06.png?table=block&id=ac7e533e-ddd4-4a30-b35a-f5761dc359fb&spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&width=2000&userId=&cache=v2)

## Dynamic Routing

Now that we have our application up and running, let’s learn more about what is dynamic routing, why we need it, and how Next.js will handle it for client-side rendered pages.

---

### Why Do We Need It

Predefined path-based routes like we used in our last tutorial are not always the best choice for **large complex and dynamic applications**.

If we would keep to the previous approach, it would involve creating a React component each time we wanted to create a new page, which would require the application’s developers to create new code, push it to the main branch and then deploy the changes to production. This is not only a CI/CD nightmare as it is also the recipe for duplicated spaghetti code.

For example, in our doggo app, every time we want to add a new dog page to the application, we don’t want to duplicate the previous component and make the necessary changes to reflect the new addition, especially since all our doggos pages render exactly the same structure. This is a perfect use case for **component reusability**.

### Component Reusability

If you’ve used **Components** before in your web journey, you are already familiar with their benefits.

Components allow you to define the common application’s structures that you can then easily reuse without the need to re-write their appearance and behavior. You then arrange those components in any way you wish to former larger, more complex components that eventually become the pieces that build full application pages. If later you wish to change that structure, design, or functionality, you only need to update the components you want and those changes will reflect everywhere they are used.

![Using Components.001.jpeg](https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F03c190d7-17f5-43ca-885b-5a8525d65f82%2FUsing_Components.001.jpeg?table=block&id=39536c8d-37aa-4b45-ac6d-f38d314be323&spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&width=2000&userId=&cache=v2)

### How Next.js Handles It

In Next.js you can do just that (as with any modern web framework) and by the end, you have a **reusable page** for your application just from a single exported **React Component**. Later, if you need to change every doggo page in your app, you will only need to update ONE component in a single file.

In order to generate dynamic (reusable) pages, there are a couple of changes and additions we need to make to our previous **React Component** so that Next.js can understand that it is in fact a dynamic route and not a static one.

It all starts with the filename within the `pages` folder, same as before, but this time with a twist. Dynamic (reusable) pages will be exported from special named files surrounded by brackets (`[param]`). The rest of the route is still defined by the folder hierarchy as we talked about in the previous article. Let’s take a look at some examples:

- `pages/dogs/[id].tsx` → `/dogs/:id` (`/dogs/123`)
- `pages/post/[...all].tsx` → `/post/*` (`/post/2020/id/title`)

If we consider the first example, `pages/dogs/[id].tsx`, any route matching the `/dogs/:id` pattern will be rendered by the **React Component** exported by the special `[id].tsx` page within the `pages/dogs` directory, such as `/dogs/123` and `/dogs/russel`.

![Dynamic Page.006.jpeg](https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fffe7b907-b6d5-4eff-944e-02e3785d651c%2FDynamic_Page.006.jpeg?table=block&id=868d2b03-3147-4d4d-b772-81952898b951&spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&width=2000&userId=&cache=v2)

To access the dynamic part of the route (the `id` in this case), we can access the **Next.js Router** directly and get it through the `query` object. In the example of `/dogs/russel`, the `query` object would be the following:

```json
{ "id": "russel" }
```

And to access it within your **React Component** you would use the provided Next.js hook `useRouter`.

![code.png](https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F0e16e30c-5ef7-4832-bb54-f95f0012c100%2Fcode.png?table=block&id=c9831c6d-483a-4b9e-b0a1-7bbfeee7f5a8&spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&width=1750&userId=&cache=v2)

## Updating our Doggo App

Let’s consider our dog app we build in the first tutorial, where we have a file exporting a **React Component** for each dog:

![Screenshot 2022-06-03 at 07.02.45.png](https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fe84fa6d2-d8a2-43cb-bc24-acc0035c3fbd%2FScreenshot_2022-06-03_at_07.02.45.png?table=block&id=3e687d9b-851a-4b02-94a4-c6b4a628f23e&spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&width=1260&userId=&cache=v2)

You can see how this can quickly become a nightmare to manage once we get into the dozens on hundreds of dogs. So let’s instead use **Dynamic Routing** to only have to manage a single file.

### Creating the Special `[id].tsx` File

In order to preserve the previous structure of our doggo pages but still refactor to use **Dynamic Routing**, we can simply rename one of the files to `[id].tsx` and delete all the other ones where a single dog is rendered. We can keep the `index.tsx` file, as it serves a different purpose and will not match the dynamic route we are creating anyway.

So the end result should be something as clean as this:

![Screenshot 2022-06-03 at 07.44.34.png](https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F24d2cb9e-8f47-4e2a-b683-75651163e814%2FScreenshot_2022-06-03_at_07.44.34.png?table=block&id=fe9ac640-e64a-45a0-9bed-92f1b826173f&spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&width=2000&userId=&cache=v2)

Now every `/dogs/:id` route will be rendered by that single `[id].tsx` file instead of requiring a file for each individual dog. Perfect!

### Updating File Content

We can now make the changes to our newly updated special file so that we can actually see the dynamic `id` being passed on each page.

We will do this by accessing the `id` through the `query` object and then rendering it on screen by adding it to the previous `h1` tag.

```tsx
import type { NextPage } from "next";
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";

const Doggo: NextPage = () => {
  const router = useRouter();  // -> Access Next.js Router here
  const { id } = router.query;

  return (
    <div>
      <Head>
        <title>A Doggo</title>
      </Head>

      <main>
				{/* // -> Render the id on the screen  */}
        <h1>This is Doggo: {id}.</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;
```

Great! Now we can see different content on each dog page based on the route provided. How awesome is that? 😎

![Screenshot 2022-06-03 at 07.55.13.png](https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F83a4255c-e2d7-45b3-9018-84e094d8bbfb%2FScreenshot_2022-06-03_at_07.55.13.png?table=block&id=bcaeb6d3-2243-44ca-8519-695d63912894&spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&width=2000&userId=&cache=v2)

### Final Result

After all your hard work, this is the expected outcome of your doggo app. Looking great already!

![ezgif.com-gif-maker (2).gif](https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F0728c035-0029-4fc4-8876-798ae1a4bf39%2Fezgif.com-gif-maker_(2).gif?table=block&id=7c108d5f-e767-44fc-964e-45f75c8c4166&spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&userId=&cache=v2)

## Final Remarks

Now that you have a working dynamic doggo app you can try and develop the individual dog page in order to dynamically fetch even more information given an *id* or test out creating new directories and more complex dynamic routes. 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 *Statically Generated Dynamic Routes* (the next step in performant dynamic webpages) 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>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.</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 allows us to easily create dynamic pages from a single React component following.</p>
<aside>
  💡 You can find the source code for this project <a href="https://github.com/igorasilveira/blog-examples/tree/main/nextjs-dynamic-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>Quick Recap</h2>
<p>The last time we were here, we created a basic web app to better understand the basics of how to build an app with Next.js.</p>
<p>We introduced the concept of <code>pages</code> and how Next.js expects us to scaffold our application and our <code>React</code> components in order for it to automatically create and manage page URLs and transitions.</p>
<p>If you missed that introductory issue, I highly recommend you to check it out <insert link here> before continuing.</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.</p>
<ul>
<li><code>/pages/index.tsx</code> maps to the <code>/</code> route (special files)</li>
<li><code>/pages/dogs/a-doggo.tsx</code> maps to the <code>/dogs/a-doggo.tsx</code> route.</li>
</ul>
<p>The new file's contents 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.</p>
<h2>Generating our Project</h2>
<p>To kick this off, we will create our Next.js project to host this app by 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-dynamic-routing --use-npm --typescript -e https://github.com/igorasilveira/blog-examples/tree/main/nextjs-basic-routing
</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-dynamic-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>
<li><code>-e</code> - this option specifies an example to bootstrap the app with. In this case, we are using the GitHub repository from the previous issue so that we can continue building our app from where we left off.</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! To do so, in the same terminal we used to generate the project, we now <code>cd</code> into our project folder and 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 check our doggo-based app! 🐶</p>
<p><img src="https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fece26bb6-6d1e-4545-b209-08cb8ead4ccd%2FScreenshot_2022-04-20_at_16.00.06.png?table=block&#x26;id=ac7e533e-ddd4-4a30-b35a-f5761dc359fb&#x26;spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&#x26;width=2000&#x26;userId=&#x26;cache=v2" alt="Screenshot 2022-04-20 at 16.00.06.png"></p>
<h2>Dynamic Routing</h2>
<p>Now that we have our application up and running, let’s learn more about what is dynamic routing, why we need it, and how Next.js will handle it for client-side rendered pages.</p>
<hr>
<h3>Why Do We Need It</h3>
<p>Predefined path-based routes like we used in our last tutorial are not always the best choice for <strong>large complex and dynamic applications</strong>.</p>
<p>If we would keep to the previous approach, it would involve creating a React component each time we wanted to create a new page, which would require the application’s developers to create new code, push it to the main branch and then deploy the changes to production. This is not only a CI/CD nightmare as it is also the recipe for duplicated spaghetti code.</p>
<p>For example, in our doggo app, every time we want to add a new dog page to the application, we don’t want to duplicate the previous component and make the necessary changes to reflect the new addition, especially since all our doggos pages render exactly the same structure. This is a perfect use case for <strong>component reusability</strong>.</p>
<h3>Component Reusability</h3>
<p>If you’ve used <strong>Components</strong> before in your web journey, you are already familiar with their benefits.</p>
<p>Components allow you to define the common application’s structures that you can then easily reuse without the need to re-write their appearance and behavior. You then arrange those components in any way you wish to former larger, more complex components that eventually become the pieces that build full application pages. If later you wish to change that structure, design, or functionality, you only need to update the components you want and those changes will reflect everywhere they are used.</p>
<p><img src="https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F03c190d7-17f5-43ca-885b-5a8525d65f82%2FUsing_Components.001.jpeg?table=block&#x26;id=39536c8d-37aa-4b45-ac6d-f38d314be323&#x26;spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&#x26;width=2000&#x26;userId=&#x26;cache=v2" alt="Using Components.001.jpeg"></p>
<h3>How Next.js Handles It</h3>
<p>In Next.js you can do just that (as with any modern web framework) and by the end, you have a <strong>reusable page</strong> for your application just from a single exported <strong>React Component</strong>. Later, if you need to change every doggo page in your app, you will only need to update ONE component in a single file.</p>
<p>In order to generate dynamic (reusable) pages, there are a couple of changes and additions we need to make to our previous <strong>React Component</strong> so that Next.js can understand that it is in fact a dynamic route and not a static one.</p>
<p>It all starts with the filename within the <code>pages</code> folder, same as before, but this time with a twist. Dynamic (reusable) pages will be exported from special named files surrounded by brackets (<code>[param]</code>). The rest of the route is still defined by the folder hierarchy as we talked about in the previous article. Let’s take a look at some examples:</p>
<ul>
<li><code>pages/dogs/[id].tsx</code> → <code>/dogs/:id</code> (<code>/dogs/123</code>)</li>
<li><code>pages/post/[...all].tsx</code> → <code>/post/*</code> (<code>/post/2020/id/title</code>)</li>
</ul>
<p>If we consider the first example, <code>pages/dogs/[id].tsx</code>, any route matching the <code>/dogs/:id</code> pattern will be rendered by the <strong>React Component</strong> exported by the special <code>[id].tsx</code> page within the <code>pages/dogs</code> directory, such as <code>/dogs/123</code> and <code>/dogs/russel</code>.</p>
<p><img src="https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fffe7b907-b6d5-4eff-944e-02e3785d651c%2FDynamic_Page.006.jpeg?table=block&#x26;id=868d2b03-3147-4d4d-b772-81952898b951&#x26;spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&#x26;width=2000&#x26;userId=&#x26;cache=v2" alt="Dynamic Page.006.jpeg"></p>
<p>To access the dynamic part of the route (the <code>id</code> in this case), we can access the <strong>Next.js Router</strong> directly and get it through the <code>query</code> object. In the example of <code>/dogs/russel</code>, the <code>query</code> object would be the following:</p>
<pre><code class="language-json">{ "id": "russel" }
</code></pre>
<p>And to access it within your <strong>React Component</strong> you would use the provided Next.js hook <code>useRouter</code>.</p>
<p><img src="https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F0e16e30c-5ef7-4832-bb54-f95f0012c100%2Fcode.png?table=block&#x26;id=c9831c6d-483a-4b9e-b0a1-7bbfeee7f5a8&#x26;spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&#x26;width=1750&#x26;userId=&#x26;cache=v2" alt="code.png"></p>
<h2>Updating our Doggo App</h2>
<p>Let’s consider our dog app we build in the first tutorial, where we have a file exporting a <strong>React Component</strong> for each dog:</p>
<p><img src="https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fe84fa6d2-d8a2-43cb-bc24-acc0035c3fbd%2FScreenshot_2022-06-03_at_07.02.45.png?table=block&#x26;id=3e687d9b-851a-4b02-94a4-c6b4a628f23e&#x26;spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&#x26;width=1260&#x26;userId=&#x26;cache=v2" alt="Screenshot 2022-06-03 at 07.02.45.png"></p>
<p>You can see how this can quickly become a nightmare to manage once we get into the dozens on hundreds of dogs. So let’s instead use <strong>Dynamic Routing</strong> to only have to manage a single file.</p>
<h3>Creating the Special <code>[id].tsx</code> File</h3>
<p>In order to preserve the previous structure of our doggo pages but still refactor to use <strong>Dynamic Routing</strong>, we can simply rename one of the files to <code>[id].tsx</code> and delete all the other ones where a single dog is rendered. We can keep the <code>index.tsx</code> file, as it serves a different purpose and will not match the dynamic route we are creating anyway.</p>
<p>So the end result should be something as clean as 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%2F24d2cb9e-8f47-4e2a-b683-75651163e814%2FScreenshot_2022-06-03_at_07.44.34.png?table=block&#x26;id=fe9ac640-e64a-45a0-9bed-92f1b826173f&#x26;spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&#x26;width=2000&#x26;userId=&#x26;cache=v2" alt="Screenshot 2022-06-03 at 07.44.34.png"></p>
<p>Now every <code>/dogs/:id</code> route will be rendered by that single <code>[id].tsx</code> file instead of requiring a file for each individual dog. Perfect!</p>
<h3>Updating File Content</h3>
<p>We can now make the changes to our newly updated special file so that we can actually see the dynamic <code>id</code> being passed on each page.</p>
<p>We will do this by accessing the <code>id</code> through the <code>query</code> object and then rendering it on screen by adding it to the previous <code>h1</code> tag.</p>
<pre><code class="language-tsx">import type { NextPage } from "next";
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";

const Doggo: NextPage = () => {
  const router = useRouter();  // -> Access Next.js Router here
  const { id } = router.query;

  return (
    &#x3C;div>
      &#x3C;Head>
        &#x3C;title>A Doggo&#x3C;/title>
      &#x3C;/Head>

      &#x3C;main>
                {/* // -> Render the id on the screen  */}
        &#x3C;h1>This is Doggo: {id}.&#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>Great! Now we can see different content on each dog page based on the route provided. How awesome is that? 😎</p>
<p><img src="https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F83a4255c-e2d7-45b3-9018-84e094d8bbfb%2FScreenshot_2022-06-03_at_07.55.13.png?table=block&#x26;id=bcaeb6d3-2243-44ca-8519-695d63912894&#x26;spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&#x26;width=2000&#x26;userId=&#x26;cache=v2" alt="Screenshot 2022-06-03 at 07.55.13.png"></p>
<h3>Final Result</h3>
<p>After all your hard work, this is the expected outcome of your doggo app. Looking great already!</p>
<p><img src="https://admitted-shamrock-c0f.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F0728c035-0029-4fc4-8876-798ae1a4bf39%2Fezgif.com-gif-maker_(2).gif?table=block&#x26;id=7c108d5f-e767-44fc-964e-45f75c8c4166&#x26;spaceId=a1132038-30f4-4c02-8dbb-44ea7cf0c715&#x26;userId=&#x26;cache=v2" alt="ezgif.com-gif-maker (2).gif"></p>
<h2>Final Remarks</h2>
<p>Now that you have a working dynamic doggo app you can try and develop the individual dog page in order to dynamically fetch even more information given an <em>id</em> or test out creating new directories and more complex dynamic routes. 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>Statically Generated Dynamic Routes</em> (the next step in performant dynamic webpages) 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>


On this issue, we will be learning about how Next.js allows us to easily create infinite dynamic pages from a single React component.

A Comprehensive Guide to NextJS Dynamic Routing

*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

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.