Next.js的next.config.ts与next.config.mjs的区别

最近在做Next.js项目的时候，按照react的流程给它做一个跨域的请求封装，本以为会像传统React项目那样顺风顺水！！接下来我将以我做配置代理的例子作介绍。希望大家看完文章后，避开我所遇上的问题。

先说结论：Next.js 默认不支持 next.config.ts 配置文件，只支持 next.config.js 和 next.config.mjs。因此，要在 TypeScript 项目中使用配置文件，需要使用 next.config.js 或 next.config.mjs，并在其中导入 TypeScript 代码或使用 JavaScript 编写配置。

1. next.config.js

• 适用场景: 这是最常用的配置文件类型，适用于大多数项目。它使用 CommonJS 语法，简单易用。

• /** @type {import('next').NextConfig} */
  const nextConfig = {
    reactStrictMode: true,
    async rewrites() {
      return [
        {
          source: '/api/:path*',
          destination: `${process.env.NEXT_PUBLIC_API_BASE_URL}:path*`, // 代理到后端 API 服务器
        },
      ];
    },
  };
  module.exports = nextConfig;
  

2. next.config.mjs

• 适用场景: 如果你希望在配置文件中使用 ES Module 语法（import 和 export），可以使用这个文件类型。

• /** @type {import('next').NextConfig} */
  const nextConfig = {
    reactStrictMode: true,
    async rewrites() {
      return [
        {
          source: '/api/:path*',
          destination: `${process.env.NEXT_PUBLIC_API_BASE_URL}:path*`, // 代理到后端 API 服务器
        },
      ];
    },
  };
  
  export default nextConfig;
  

选择一种并保持一致

在一个项目中，只需要选择其中一种配置文件类型，并且确保全局使用该类型。例如，如果你选择了 next.config.js，就不要再使用 next.config.ts 或 next.config.mjs。这样可以避免冲突和混淆，确保配置文件的清晰性和项目的稳定性。

可能的影响

• 配置文件冲突: 如果同时存在多个配置文件类型，Next.js 可能会优先加载其中一个文件，其他配置文件可能会被忽略，从而导致配置不一致或错误。
• 维护复杂性: 多个配置文件类型可能会增加项目的维护复杂性，特别是当不同的团队成员对不同文件进行修改时，可能会导致混乱。

我配置了sass，并且开发语言是ts，然后需要为它配置 include 路径，所以我认为vite是识别不到.js类型的文件的，然后改成next.config.ts。但是某种机缘巧合下，sass的配置是生效的！这让我对我的配置文件深信不疑。但是当我配置代理时，理所应当的是在next.config.ts里面配置。它是不可能生效的。所以一波三折后这篇文章出现了。至于为什么next.config.ts的sassOptions是生效的，我不打算了理睬了。最后这是我的next.config.mjs文件。

/** @type {import('next').NextConfig} */

import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const nextConfig = {
  // @link https://nextjs.org/docs/app/api-reference/next-config-js/headers
  reactStrictMode: true,
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: `${process.env.NEXT_PUBLIC_API_BASE_URL}:path*`, // 代理到后端 API 服务器
      },
    ];
  },
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
};

export default nextConfig;

这个错误也是纠缠了我好久！我一直认为是我配置的跨域有问题，因为之前对next的特性不熟悉，以为它有什么特殊的跨域方法。学习就该如此！不断学习不断积累，加油！！