Export a react / next.js website failed

Hi,

I am trying to publish my first website through your platform;

It is a react next js app, connected to my private github repo properly; I am using the npm run export that works fine locally; but I get the following error when I try to deploy to netlify:

5:20:20 PM: Executing user command: npm run export
5:20:20 PM: > website-name@1.0.0 export /opt/build/repo
5:20:20 PM: > next export
5:20:21 PM: > using build directory: /opt/build/repo/.next
5:20:21 PM: { Error: ENOENT: no such file or directory, open '/opt/build/repo/.next/BUILD_ID'
5:20:21 PM:     at Object.openSync (fs.js:443:3)
5:20:21 PM:     at readFileSync (fs.js:343:35)
5:20:21 PM:     at _default (/opt/build/repo/node_modules/next/dist/export/index.js:1:3652)
5:20:21 PM:   errno: -2,
5:20:21 PM:   syscall: 'open',
5:20:21 PM:   code: 'ENOENT',
5:20:21 PM:   path: '/opt/build/repo/.next/BUILD_ID' }
5:20:21 PM: npm

My next.config.js file is as follow:

const withPlugins = require('next-compose-plugins');
const withOptimizedImages = require('next-optimized-images');
const withFonts = require('next-fonts');
const withCSS = require('@zeit/next-css');
const withOffline = require("next-offline");

const nextConfig = {
    target: "serverless",
    workboxOpts: {
      swDest: "static/service-worker.js",
      runtimeCaching: [
        {
          urlPattern: /^https?.*/,
          handler: "networkFirst",
          options: {
            cacheName: "https-calls",
            networkTimeoutSeconds: 15,
            expiration: {
              maxEntries: 150,
              maxAgeSeconds: 30 * 24 * 60 * 60 // 1 month
            },
            cacheableResponse: {
              statuses: [0, 200]
            }
          }
        }
      ]
    }
  };

module.exports = withPlugins(
    [
        [
            withOptimizedImages,
            {
                mozjpeg: {
                    quality: 90,
                },
                webp: {
                    preset: 'default',
                    quality: 90,
                },
            },
        ],
        withFonts,
        withCSS
    ],
    withOffline(nextConfig)
);

Did I miss anything?
Thank you so much in advance for your help :slight_smile:

hey there, what are your build settings? I am wondering if having the dot in the foldername .next is causing some problems.

Hi Perry,

Thank you for taking the time to look into my issue.

My build settings in netlify are:

build command: npm run export
Publish directory: out

Here is the script part in my package.json:

"scripts": {

    "build": "next build",

    "dev": "next dev",

    "start": "next start",

    "export": "next export",

    "deploy": "npm run build && npm run export"

  },

As for the dot in “.next” folder, this is the norm with next.js, its folder always has it.

Please let me know if you need anything else,
Thank you!

Hey @pierroo, is it possible that you have an environment variable hard-coded? The error to me looks like Netlify’s build environment can’t find this directory: '/opt/build/repo/.next/BUILD_ID', where I’m guessing BUILD_ID is supposed to be a constant. You could either set that in the Netlify UI here:
https://app.netlify.com/sites/legitbee-temp/settings/deploys#environment-variables
and then access it with process.env.BUILD_ID.

Or it looks like you can do it in your next.config:

Want to try that and let us know if it fixes things for you?