Next.js - Dukungan TypeScript

Next.js, memiliki dukungan yang sangat baik untuk skrip ketikan. Berikut adalah beberapa langkah untuk mengaktifkan skrip ketikan dalam proyek.

Buat tsconfig.json

Buat tsconfig.json di direktori root. Kami mengosongkannya pada awalnya. Sekarang mulai server.

Next.JS akan mendeteksi tsconfig.json dan menampilkan pesan follwing di konsol.

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).
...

Pasang naskah ketikan

Jalankan perintah npm install untuk menginstal skrip tipe dan pustaka terkait.

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
...

Mulai Server Next.js

Jalankan perintah berikut untuk memulai server -.

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

Buka tsconfig.json

Server NextJS telah memodifikasi 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"
   ]
}

Buat halo

Buat hello.ts di direktori pages / api yang akan bertindak sebagai layanan istirahat untuk kita.

import { NextApiRequest, NextApiResponse } from 'next'

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

Mulai Server Next.js

Jalankan perintah berikut untuk memulai server -.

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

Verifikasi Output

Buka localhost: 3000 / api / hello di browser dan Anda akan melihat output berikut.

{"text":"Welcome to TutorialsPoint"}