Building Static Sites with Next.js: A Hands-On Tutorial

Unlock the benefits of Static Site Generation (SSG) in Next.js to create high-performance static websites."

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 10/09/2024 at 12:41
Last Updated on 10/09/2024 at 14:46
<p>A flower that represents NextJS with the text "Static Site Generation (SSG)" beneath it.</p>

Unlock the benefits of Static Site Generation (SSG) in Next.js to create high-performance static websites."

SubscribeDownload Open Source Project

The following post explains how to generate static websites using the NextJS app router.

If you are not familiar with the NextJS app router, consult the link below.

How the NextJS app router works

The tutorial follows the principles laid out in the official NextJS documentation linked below.

NextJS: Dynamic Routes

Step One: Update the NextJS Config

<p>A screenshot of a NextJS config which includes "output": export parameter.</p>

In the next.config.mjs file, add output: export, to tell NextJS to export your project as static files to the out directory during the build process (i.e. yarn build or npm build).

Step Two: Generate Static Params 

<p>A screenshot of the NextJS documentation showing how to add parameters for dynamic routes.</p>

At the bottom of each page that uses a dynamic route, add the generateStaticParams function and return an array that contains the parameters required for each page.

Step Three: Build

<p>A screenshot of terminal showing how the project was exported as a static website.</p>

In Terminal, build the project.

You should see an output that indicates that all the pages are static.

Are your images not showing correctly?

Unfortunately, Next14 or lower does not allow Next/Image to work with Static Site Generation.

Read our tutorial below to discover the solution.

NextJS Static Site doesn't show images

Looking to learn more about NextJS, ReactJS or web development?

Search our blog to find educational content on NextJS, ReactJS and web development.

Search our Blog

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
SubscribeContact UsVisit our BlogView our ServicesView our Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe