Export nextjs project to static website

Developing with Prismic
,
1

Hello! I have a Nextjs website connected with Prismic. Everything works well with the normal setup. Now I'm trying to export my project to a fully-static website, and I'm running into issues.

Steps Taken:

  1. Set the output mode in next.config.js to use output: 'export', as instructed in next.js docs about static exports

  2. Run npm run build.

Expected output

(This is just a build output from a fresh Next.js template that doesn't use Prismic)

> next build

  ▲ Next.js 14.2.3

   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.46 kB        92.5 kB
└ ○ /_not-found                          871 B          87.9 kB
+ First Load JS shared by all            87.1 kB
  ├ chunks/23-9cefcdc0615b541e.js        31.6 kB
  ├ chunks/fd9d1056-2821b0f0cabcd8bd.js  53.6 kB
  └ other shared chunks (total)          1.87 kB


○  (Static)  prerendered as static content

Along with the output above, a new directory out is automatically generated, which contains all the static files that I need to host the project as a static website.

Actual output

The actual output of the project is as the following:

> nextjs-starter-prismic-minimal-ts@0.1.0 build
> next build

  ▲ Next.js 14.2.3

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    

> Server Actions are not supported with static export.

With this output, no out directory is generated.

I've also tried removing preview-related files as mentioned in this post such as:

  • src/app/api/preview/route.ts
  • src/app/api/exit-preview/route.ts
  • src/app/api/revalidate/route.ts
  • <PrismicPreview> in app/layout.tsx
  • enableAutoPreviews() in src/prismicio.ts

But the issue persisted.

Package.json file

{
  "name": "nextjs-starter-prismic-minimal-ts",
  "version": "0.1.0",
  "private": true,
  "license": "Apache-2.0",
  "author": "Prismic <contact@prismic.io> (https://prismic.io)",
  "scripts": {
    "dev": "concurrently \"npm:next:dev\" \"npm:slicemachine\" --names \"next,slicemachine\" --prefix-colors blue,magenta",
    "next:dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "slicemachine": "start-slicemachine",
    "format": "prettier --write ."
  },
  "dependencies": {
    "@prismicio/client": "^7.5.0",
    "@prismicio/next": "^1.6.0",
    "@prismicio/react": "^2.8.0",
    "clsx": "^2.1.1",
    "next": "^14.2.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^5.2.1"
  },
  "devDependencies": {
    "@slicemachine/adapter-next": "^0.3.40",
    "@types/node": "^20.14.1",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "autoprefixer": "^10.4.19",
    "concurrently": "^8.2.2",
    "eslint": "^8.57.0",
    "eslint-config-next": "^14.2.3",
    "postcss": "^8.4.38",
    "prettier": "^3.3.0",
    "prettier-plugin-tailwindcss": "^0.5.14",
    "slice-machine-ui": "^2.1.0",
    "tailwindcss": "^3.4.3",
    "typescript": "^5.4.5"
  }
}

Any assistance would be much appreciated. Thank you!

4

Hi @epochdevelectronics ,

Welcome to the community :slight_smile:

Are you planning to deploy statically on Vercel? If so I would recommend following their instructions instead and you shouldn't see these issues.

Thanks.

5

Thank you for the response @Phil !

We are currently looking into deploying the project as a static website but not using Vercel. We are considering deploying it with some other hosting solutions or possibly manage our own cloud server. Is there a good docs / resources regarding that?

6

Hey @epochdevelectronics,

We have docs for deploying Nextjs on Vercel, Netlify, and AWS:

In general, you can deploy wherever you like so long as the platform supports Nextjs. Just follow their instructions for deploying a Next.js app and follow our instructions for connecting a webhook.

Sam