[Next.js] 初始化并启用 TypeScript

开发环境

Node 版本：12.16.2

Next.js 版本：9.4.4

编辑器：PhpStorm

脚手架初创建项目

npx create-next-app
npm run dev

访问url：http://localhost:3000/，可以看到项目已经开始运行

安装typescript相关插件

npm install --save-dev typescript @types/react @types/node

将pages中的文件后缀改为tsx，重新运行 npm run dev，自动生成 tsconfig.json 文件。

测试

新建文件 components/Example/index.tsx

export default function Example() {
    return <div>Example</div>
}

pages/index.js 重命名为 pages/index.tsx，修改代码

import Example from '../components/Example/index';

export default function Home() {
  return <Example/>
}

查看页面，展示 Example， 成功。