next.config.mjs

next.config.mjs

next.config is using *.mjs extension to tell node that my codes are written using ES module instead of CommonJs(*.cjs). So, no require() and no module.exports in my codes. Only import and export are in my codes.

Basic

// next.config.mjs

// *** START: Export a DEFAULT object, i.e nextConfig
const nextConfig = {}


// Produce standalone output (For docker)
// ---------------------------------
//  "next start" doesn't generate standalone output.
//  Generate standalone output if BUILD_STANDALONE=true.
nextConfig.output = process.env.BUILD_STANDALONE === "true" ? "standalone" : undefined;

// Produce standalone output (For docker)
// ---------------------------------
//  Don't generate map files in production. Generate only if ENABLE_SOURCE_MAP=true.
nextConfig.productionBrowserSourceMaps =process.env.ENABLE_SOURCE_MAP === "true" ? true : undefined;


// *** END: Export
export default nextConfig;

With MDX

// next.config.mjs

import createMDX from '@next/mdx';

import remarkFrontmatter from 'remark-frontmatter';
import remarkMdxFrontmatter from 'remark-mdx-frontmatter';
import remarkSectionize from 'remark-sectionize';
import remarkPrism from 'remark-prism';


// *** START: Export a DEFAULT object, i.e nextConfig
const nextConfig = {}

    // Produce standalone output (For docker)
    // -----------------------------------------------------------------------------
    //  "next start" doesn't generate standalone output.
    //  Generate standalone output if BUILD_STANDALONE=true.
    nextConfig.output = process.env.BUILD_STANDALONE === "true" ? "standalone" : undefined;

    // Produce standalone output (For docker)
    // -----------------------------------------------------------------------------
    //  Don't generate map files in production. Generate only if ENABLE_SOURCE_MAP=true.
    nextConfig.productionBrowserSourceMaps =process.env.ENABLE_SOURCE_MAP === "true" ? true : undefined;


    // Configure pageExtensions to also include *.mdx
    // -----------------------------------------------------------------------------
    nextConfig.pageExtensions = ['jsx', 'mdx', 'ts', 'tsx']; 


const withMDX = createMDX({
    extension: /\.mdx?$/,
    options: {
        // If you use remark-gfm, you'll need to use next.config.mjs
        // as the package is ESM only
        // https://github.com/remarkjs/remark-gfm#install
        remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter, remarkSectionize, remarkPrism],
        // If you use `MDXProvider`, uncomment the following line.
        // providerImportSource: "@mdx-js/react",
    },
})


// *** END: Export
// Merge MDX config with Next.js config
export default withMDX(nextConfig)

next.config.js(for old time sake)

// next.config.js
module.exports = {
    // Fix: "next start" does not work with "output: standalone" configuration. Use "node .next/standalone/server.js" instead.
    //  https://github.com/vercel/next.js/issues/49594#issuecomment-1542266768
    output: process.env.BUILD_STANDALONE === "true" ? "standalone" : undefined,
};