1. Introduction

Goal of the Tutorial

This tutorial aims to guide you through the process of exporting your Next.js application for static hosting. This means converting your application into static HTML, CSS, and JS files that can be served by any static hosting service or Content Delivery Network (CDN).

Learning Outcomes

By the end of this tutorial, you will have learned how to:
- Configure your Next.js application for static exporting
- Run the export command to generate static files
- Understand the structure of the outputted files

Prerequisites

Before starting this tutorial, you should:
- Have Node.js and npm installed on your machine
- Have a basic understanding of JavaScript and React
- Have a basic understanding of how to create a Next.js application

2. Step-by-Step Guide

Step 1: Setting Up Your Next.js App

First, you need to have a Next.js app ready. If you don't have one, you can quickly set one up by running the following commands in your terminal:

npx create-next-app@latest my-app
cd my-app

Step 2: Configuring next.config.js for Static Exporting

In order to tell Next.js that we want to export our app as static files, we need to create a next.config.js file at the root of our project and use the exportPathMap function. Here's an example:

module.exports = {
  exportPathMap: async function (defaultPathMap, { dev, dir, outDir, distDir, buildId }) {
    return {
      '/': { page: '/' },
      '/about': { page: '/about' },
    };
  },
};

This configuration tells Next.js to generate static pages for the routes / and /about.

Step 3: Running the Export Command

Once your configuration is set, you can generate your static files by running the following commands:

npm run build
npm run export

You should now see a new out directory at the root of your project. This directory contains all your static files.

3. Code Examples

Example 1: Basic Static Export

Let's assume we have a simple Next.js application with two pages: index.js and about.js.

Here's what your next.config.js should look like:

module.exports = {
  exportPathMap: async function (defaultPathMap, { dev, dir, outDir, distDir, buildId }) {
    return {
      '/': { page: '/' },
      '/about': { page: '/about' },
    };
  },
};

After running npm run build and npm run export, your out directory should contain index.html and about/index.html.

Example 2: Dynamic Routes

If your application includes dynamic routes such as /posts/[id], you'll need to specify each route in your next.config.js. Let's assume you have three posts with the ids 1, 2, and 3.

module.exports = {
  exportPathMap: async function (defaultPathMap, { dev, dir, outDir, distDir, buildId }) {
    return {
      '/': { page: '/' },
      '/about': { page: '/about' },
      '/posts/1': { page: '/posts/[id]', query: { id: '1' }},
      '/posts/2': { page: '/posts/[id]', query: { id: '2' }},
      '/posts/3': { page: '/posts/[id]', query: { id: '3' }},
    };
  },
};

4. Summary

In this tutorial, you've learned how to configure and export a Next.js application for static hosting. Specifically, you've seen how to:
- Set up a basic Next.js application
- Configure next.config.js to specify which routes to export
- Use the npm run export command to generate static files

5. Practice Exercises

Exercise 1: Static Export of a Simple Blog

Create a simple blog with Next.js. The blog should have a home page, an about page, and three blog posts. Configure your application for static export.

Exercise 2: Adding Dynamic Routes

Expand your blog from Exercise 1 by adding a dynamic route for each blog post. Each post should have its own URL based on its id. Configure your application for static export.

If you're stuck, refer back to the tutorial or to the Next.js documentation.

Happy coding!