如何在不启用NextJS TypeScript编译的情况下获取next-env.d.ts以实现智能提示？

• 临时生成next-env.d.ts文件

  1. 在项目根目录创建一个基础的tsconfig.json文件，内容如下：

     {
       "compilerOptions": {
         "target": "es5",
         "lib": ["dom", "dom.iterable", "esnext"],
         "allowJs": true,
         "skipLibCheck": true,
         "strict": false,
         "forceConsistentCasingInFileNames": true,
         "noEmit": true,
         "incremental": true,
         "esModuleInterop": true,
         "module": "esnext",
         "moduleResolution": "node",
         "resolveJsonModule": true,
         "isolatedModules": true,
         "jsx": "preserve"
       },
       "include": ["next-env.d.ts", "**/*.js", "**/*.jsx"],
       "exclude": ["node_modules"]
     }
     

  2. 运行一次next dev或next build命令，Next.js会自动在项目根目录生成next-env.d.ts文件
  3. 文件生成完成后，删除或重命名tsconfig.json（比如改为tsconfig.temp.json），这样Next.js就不会切换到TypeScript编译模式

• 配置JS项目的类型提示

  1. 保留生成的next-env.d.ts文件，在JS文件中可以通过JSDoc引用Next.js的类型，示例：

     /** @type {import('next').NextPage} */
     export default function Home() {
       return <div>Hello World</div>;
     }
     

  2. 可选：创建jsconfig.json文件优化编辑器的类型识别能力：

     {
       "compilerOptions": {
         "checkJs": true,
         "types": ["next"]
       },
       "include": ["**/*.js", "**/*.jsx", "next-env.d.ts"]
     }
     

内容的提问来源于stack exchange，提问作者Michael Landis