Nextjs - Export as static site

Nextjs is a great framework to create multiple page react applications. It can also export the whole app as a static site. This is extremely useful if we want to avoid nodejs server and use another server like nginx to host the site, which is faster and more efficient.

To export the site, we need to change the next.config.js file to include the following:

const nextConfig = {
  distDir: "build",
  output: "export",
};

export default nextConfig;

This will export the app as a static site to build folder. The build folder will contain all the static files, which can be hosted using any static hosting solution.

Below are the sample nginx config and Dockerfile to host the static site.

nginx config

server {
  listen 80;
  server_name localhost;

  location / {
    root /usr/share/nginx/html;
    index index.html;
  }
}

Dockerfile

We can use nginx to host the static site. The following is a sample Dockerfile to host the static site using nginx.

FROM nginx:alpine

COPY ./nginx.conf /etc/nginx/conf.d/default.conf

COPY ./build /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

We can also use caddy to host the static site. The following is a sample Caddyfile to host the static site using caddy.

localhost:8080 {
  root * /usr/share/caddy
  file_server
}

caddy run