next.jsexportnextjs14static-site-generation

Nextjs 14 pages folder, output:"export" is not working


I'm working on nextjs 14.2 version with pages folder. I don't have any images, /api routes or anything yet. This is an old nextjs app, updated to latest version.

When I run npm run build, it is not generating .out folder. Only .next folder is created.

nextjs.config.mts:

const nextConfig: NextConfig = {
  output: 'export',
  reactStrictMode: true,
  webpack(config, { isServer }) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
};

Is typescript, next config valid?

and below is my next build output log.

> sample-app@0.1.0 build:next
> next build

  ▲ Next.js 14.2.7

 ✓ Linting and checking validity of types    
   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Collecting page data    
 ✓ Generating static pages (3/3)
 ✓ Collecting build traces    
 ✓ Finalizing page optimization    

Route (pages)                             Size     First Load JS
┌ ○ /                                     445 B          78.9 kB
├   └ css/9892d4308d0bb550.css            355 B
├   /_app                                 0 B            78.5 kB
└ ○ /404                                  180 B          78.7 kB
+ First Load JS shared by all             78.9 kB
  ├ chunks/framework-ecc4130bc7a58a64.js  45.2 kB
  ├ chunks/main-b203a0fef99bcbd5.js       32.1 kB
  └ other shared chunks (total)           1.63 kB

○  (Static)  prerendered as static content

package.json

{
,
"dependencies": {
...
    "next": "^14.2.7",
    "serve": "^14.2.3"
...
  },
}

As you can see here, .next is created but no .out. What could be wrong?

enter image description here


Solution

  • Follow the official documentation and change the name of the output directory.

    /**
     * @type {import('next').NextConfig}
     */
    const nextConfig = {
      output: 'export',
     
      // Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
      // trailingSlash: true,
     
      // Optional: Prevent automatic `/me` -> `/me/`, instead preserve `href`
      // skipTrailingSlashRedirect: true,
     
      // Optional: Change the output directory `out` -> `dist`
      // distDir: 'dist',
    }
     
    module.exports = nextConfig