Configuring NextJS to Create a Static Site

Setting up NextJS to produce output that can be hosted on any server statically for the project using React with Radix UI and Shadcn UI.

Configuring NextJS

By using NextJS's supports for static export, the developed website can be hosted on any web server that can serve HTML/CSS/JS static assets. This is described in Static Exports. Per the instructions we modify the 'next.config.mjs' file so:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
};
 
export default nextConfig;

When we execute the command to create a build:

% npm run build
> [email protected] build
> next build
 
  ▲ Next.js 14.2.4
 
   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types
 ✓ Collecting page data
 ✓ Generating static pages (5/5)
 ✓ Collecting build traces
 ✓ Finalizing page optimization
 
Route (app)                              Size     First Load JS
┌ ○ /                                    5.23 kB        92.4 kB
└ ○ /_not-found                          875 B            88 kB
+ First Load JS shared by all            87.1 kB
  ├ chunks/23-2309b8fd26fbddcb.js        31.6 kB
  ├ chunks/fd9d1056-2821b0f0cabcd8bd.js  53.7 kB
  └ other shared chunks (total)          1.85 kB
 
 
○  (Static)  prerendered as static content

The static site is now created in the out directory, where the structure looks something like this:

├── 404.html
├── _next
│   ├── jNh1L8297EuwDCjEUi7gy
│   └── static
│       ├── chunks
│       │   ├── 173-32f9ff9bdfb525b3.js
│       │   ├── 23-2309b8fd26fbddcb.js
│       │   ├── app
│       │   │   ├── _not-found
│       │   │   │   └── page-05886c10710171db.js
│       │   │   ├── layout-071b8f75023835d6.js
│       │   │   └── page-dd793661f0d57fa3.js
│       │   ├── fd9d1056-2821b0f0cabcd8bd.js
│       │   ├── framework-f66176bb897dc684.js
│       │   ├── main-7714fe2344349366.js
│       │   ├── main-app-a74db369375cd893.js
│       │   ├── pages
│       │   │   ├── _app-6a626577ffa902a4.js
│       │   │   └── _error-1be831200e60c5c0.js
│       │   ├── polyfills-78c92fac7aa8fdd8.js
│       │   └── webpack-d0ceac4fb78a3613.js
│       ├── css
│       │   └── aa905edf1b7ba73b.css
│       ├── jNh1L8297EuwDCjEUi7gy
│       │   ├── _buildManifest.js
│       │   └── _ssgManifest.js
│       └── media
│           ├── 05a31a2ca4975f99-s.woff2
│           ├── 513657b02c5c193f-s.woff2
│           ├── 51ed15f9841b9f9d-s.woff2
│           ├── c9a5bc6a7c948fb0-s.p.woff2
│           ├── d6b16ce4a6175f26-s.woff2
│           ├── ec159349637c90ad-s.woff2
│           └── fd4db3eb5472fc27-s.woff2
├── favicon.ico
├── index.html
├── index.txt
├── next.svg
└── vercel.svg

In order to view the generated static site we install sirv:

% npm i sirv --save
% npm i sirv-cli --save

We add a new script in package.json:

{
  ...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "sirv": "sirv out",
    "start": "next start",
    "lint": "next lint"
  },
  ...
}

Then we can use sirv to view the generated static site (at port 8080, by default for sirv):

% npm run sirv
  Your application is ready~! 🚀
 
  - Local:      http://localhost:8080
  - Network:    Add `--host` to expose
 
────────────────── LOGS ──────────────────

Last Updated: