Error: Configuring Next.js via 'next.config.ts' is not supported. Please replace the file with 'next.config.js'

Question

I am building typescript next project. if I keep this config file as next.config.js, I get a warning in tsconfig.json saying "next.config.ts not found". so tsconfig.json has warning sign on the {}.

If I change the extension to .ts, when I start the project, I get this error:

"Error: Configuring Next.js via 'next.config.ts' is not supported. Please replace the file with 'next.config.js'. "

I am confused and I do not what to do.

ts.config.json

{ 
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "sourceMap": true,
    "removeComments": true,

    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

next.config.ts

const path = require("path");
const Dotenv = require("dotenv-webpack");

module.exports = {
  env: {
    AUTH0_NAMESPACE: process.env.AUTH0_NAMESPACE,
    BASE_URL: process.env.BASE_URL,
  },
};

Answer 1

It seems that using next.config.ts slows down bootup, since you have to compile it yourself, or at least that's what the members of the next.js repo said.

There was an issue (more like a request) to support next.config.ts natively. Here is the issue about it, it has some solutions from other developers