Next.js - Hỗ trợ TypeScript

Next.js, có hỗ trợ thực thi cho kiểu chữ. Sau đây là một số bước để bật bảng chữ trong dự án.

Tạo tsconfig.json

Tạo tsconfig.json trong thư mục gốc. Chúng tôi đang giữ nó trống ban đầu. Bây giờ khởi động máy chủ.

Next.JS sẽ phát hiện tsconfig.json và hiển thị thông báo follwing trên bảng điều khiển.

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

Cài đặt bản ghi

Chạy lệnh npm install để cài đặt bản ghi và các thư viện liên quan.

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

Khởi động Máy chủ Next.js

Chạy lệnh sau để khởi động máy chủ -.

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

Mở tsconfig.json

Máy chủ NextJS đã sửa đổi 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"
   ]
}

Tạo hello.ts

Tạo hello.ts trong thư mục pages / api sẽ hoạt động như một dịch vụ nghỉ ngơi cho chúng tôi.

import { NextApiRequest, NextApiResponse } from 'next'

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

Khởi động Máy chủ Next.js

Chạy lệnh sau để khởi động máy chủ -.

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

Xác minh đầu ra

Mở localhost: 3000 / api / hello trong trình duyệt và bạn sẽ thấy kết quả sau.

{"text":"Welcome to TutorialsPoint"}