Next.js-TypeScriptサポート

Next.jsは、typescriptを優れた方法でサポートしています。以下は、プロジェクトでタイプスクリプトを有効にするためのいくつかの手順です。

tsconfig.jsonを作成します

ルートディレクトリにtsconfig.jsonを作成します。最初は空のままにしておきます。次に、サーバーを起動します。

Next.JSはtsconfig.jsonを検出し、コンソールに次のメッセージを表示します。

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
It looks like you're trying to use TypeScript but do not have the required package(s) installed.

Please install typescript, @types/react, and @types/node by running:

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

If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files).
...

typescriptをインストールする

npm installコマンドを実行して、typescriptおよび関連ライブラリをインストールします。

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

+ @types/[email protected]
+ @types/[email protected]
+ [email protected]
added 5 packages from 72 contributors and audited 839 packages in 27.538s
...

Next.jsサーバーを起動します

次のコマンドを実行してサーバーを起動します-。

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
We detected TypeScript in your project and created a tsconfig.json file for you.


Your tsconfig.json has been populated with default values.

event - compiled successfully
wait  - compiling...
event - compiled successfully

tsconfig.jsonを開きます

NextJSサーバーがtsconfig.jsonを変更しました。

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

hello.tsを作成します

pages / apiディレクトリにhello.tsを作成します。これは私たちのRESTサービスとして機能します。

import { NextApiRequest, NextApiResponse } from 'next'

export default (_: NextApiRequest, res: NextApiResponse) => {
   res.status(200).json({ text: 'Welcome to TutorialsPoint' })
}

Next.jsサーバーを起動します

次のコマンドを実行してサーバーを起動します-。

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

出力を確認する

ブラウザでlocalhost：3000 / api / helloを開くと、次の出力が表示されます。

{"text":"Welcome to TutorialsPoint"}