Static Generation

Learn how to create a static website with Next.js.

We'll cover the following

Overview

Next.js can use static generation to statically generate web pages with and without data from an external source. Let's start with generating a web page statically without data.

Static generation without data

Next.js will, by default, create web pages without dependencies on external data when the application is built for production. So there isn't much to know about static pages that only take content from the source of the page. For example, an “About” page that only shows information that is hard-coded into the page won’t have any external dependencies. This page will be automatically generated statically at build time.

Static generation with data

Here’s where things get interesting. To prerender pages that use data from an external source, the data has to be fetched and generated at build time. Next.js provides an out-of-the-box function to handle this as well. The function is getStaticProps().

Let’s talk a bit about how it works. The getStaticProps() function is an async method that can be exported along with the page content. When we do this, the data is fetched during build time, and the page is statically generated at build time. First, let’s take a look at the syntax of the function:

Press + to interact
// Page function will take the props as a parameter from the getStaticProps function
export default function Home(props){
  
  return (
    <div>
      {props}
    </div>
  )
}
export async function getStaticProps(){
  // Get data from an external source
  const data = await fetch(URL)
  // Return the data fetched from the external source
  return {
    props: {
      data
    }
  }  
}

Using getStaticProps()

Let’s take an example of how we can use the getStaticProps() function in our applications.

Note: We’ll use a free API for this example called TheMealDB, which contains a database of a variety of meals and doesn’t require an API key for development and educational purposes. 

import React from 'react'
import Link from 'next/link';
import styles from '../styles/Header.module.css'
import { useRouter } from 'next/router';

const Header = () => {
  const router = useRouter();

  const handleHomeRoute = (e) => {
    e.preventDefault()
    router.push('/')
  }

  return (
    <div className={styles.container}>
      <div 
        className={styles.link}
        onClick = {handleHomeRoute}
      >
        Home
      </div>
    </div>
  )
}

export default Header;
Using the getStaticProps() function in an application

The getStaticProps() function can be seen in line 64 of our /pages/index.js file. We give {mealCategories} as a parameter for our Home component. This is because we return the mealCategories variable in the props object of the getStaticProps() function.

During build time, the code above works like this:

  • Line 8: The props object is passed to the page where we use mealCategories to extract that part of the object to use in the page content.

  • Line 27–57: The mealCategories variable is used to display the data prefetched from the API.

  • Lines 64–73: The getStaticProps() method is executed, which calls the API and returns the props object. The props object contains the mealCategories variable, which stores the data from the API call.

Static generation is a core principle of Jamstack, and is needed in creating a Jamstack application. Once a website is statically generated, it can be saved on a CDN, and we can serve it without any other requests.