Sentry Answers>Next.js>

Invalid next.config.js options detected

Invalid next.config.js options detected

Matthew C.

—

The Problem

When using a Next.js app, you may encounter the following error in your terminal indicating that your next.config.js file has invalid keys or values:

Click to Copy
Invalid next.config.js options detected:

The second line in the error message points to the incorrect configuration option. For example, if you use the following Next.js configuration in your next.config.js file:

Click to Copy
module.exports = {
  output: "standalon",
}

You’ll get the error:

Click to Copy
Expected 'standalone' | 'export', received 'standalon' at "output"

The Solution

Next.js is configured using the next.config.js file in the root directory of your project. Fix the config error listed in the error message. For example:

Click to Copy
module.exports = {
  output: "standalone",
}

The next.config.js file is a Node.js module used by the Next.js server and build but is not included in the browser build.

The file has a default CommonJS module export. You can export an ES module instead if you name the file next.config.mjs. You can also export a function, and from Next.js version 12.1.0 you can export an async function.

If you use a function, you can set specific configs for production, testing, and development using the phase argument, to set the current context in which the configuration is loaded. You can see a list of the available phases here.

You can see a list of the available configuration options in the Next.js docs, including: output, reactStrictMode, and images.

If you are using TypeScript, make sure that you import the NextConfig type from next and add it as a JS Doc comment that references the TypeScript type using the @type tag:

Click to Copy
/** @type {import("next").NextConfig} */
module.exports = {
  output: "standalone",
}

Use the TypeScript tools in your development IDE to see which configuration keys and values are valid.

  • Sentry BlogCommon Errors in Next.js and How to Resolve Them
  • Community SeriesDebug Next.js with Sentry
  • ResourcesJavaScript Frontend Error Monitoring 101
  • Syntax.fmListen to the Syntax Podcast
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

learn more about sentryjoin our discord
© 2024 • Sentry is a registered Trademark of Functional Software, Inc.