The Be Sure Blog

To do a static export of your Next.js project, you just need to open the package.json file in your text editor and add a single line to it.

Within "scripts", simply add the line:

"export": "next build && next export"

After this, your package.json may look like this:

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "export": "next build && next export"
  },
  "dependencies": {
    "next": "12.3.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-markdown": "^8.0.3",
  },
  "devDependencies": {
    "eslint": "8.25.0",
    "eslint-config-next": "12.3.1"
  }
}

Now you can do the static export by running the terminal command:

$ npm run export

Once the export is done successfully, your files are located in the newly created "out" folder. You can upload all files within this folder to your web server via FTP and reach your website under yourdomain.com/index.html.

More information to be found in the Next.js documentation.