Next.js - รองรับ TypeScript

Next.js มีการสนับสนุนที่ยอดเยี่ยมสำหรับ typescript ต่อไปนี้เป็นขั้นตอนไม่กี่ขั้นตอนในการเปิดใช้งาน typescript ในโครงการ

สร้าง tsconfig.json

สร้าง tsconfig.json ในไดเรกทอรีราก เรากำลังทำให้มันว่างเปล่าในตอนแรก ตอนนี้เริ่มเซิร์ฟเวอร์

ถัดไป 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

สร้าง hello.ts ในไดเรกทอรี pages / api ซึ่งจะทำหน้าที่เป็นบริการพักสำหรับเรา

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"}