【从零开始NextJS】2)Next 初始化 with typescript

npm init

名字随便填, 一路回车到底yes, 生成package.json

npm install --save react react-dom next

3.package.json内添加

  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
}

4.根目录新建tsconfig.json, 新建pages文件夹, 文件夹内建index.js

npm run dev

报错, 提示run命令

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

按照报错的命令跑一下, 会自动填充tsconfig.json和生成next-env.d.ts

5.test typescript
pages/index.js 改为index.tsx, 内写入

import { NextPage } from 'next'

interface Props {
  testInitialProps?: string;
}

const App: NextPage<Props> = ({ testInitialProps }) => (
  <>
    <div>
      test: {testInitialProps}
    </div>
  </>
)

App.getInitialProps = async (x) => {
  const testInitialProps = 'test'
  return { testInitialProps }
}

export default App

npm run dev 跑起来看一下, TS配置完成