Next.js - obsługa języka TypeScript

Next.js, ma execellent wsparcie dla maszynopisu. Poniżej znajduje się kilka kroków, aby włączyć maszynopis w projekcie.

Utwórz plik tsconfig.json

Utwórz plik tsconfig.json w katalogu głównym. Na początku trzymamy to puste. Teraz uruchom serwer.

Next.JS wykryje plik tsconfig.json i wyświetli następujący komunikat na konsoli.

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

Zainstaluj maszynopis

Uruchom polecenie npm install, aby zainstalować skrypt maszynowy i powiązane biblioteki.

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

Uruchom serwer Next.js

Uruchom następujące polecenie, aby uruchomić serwer -.

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

Otwórz plik tsconfig.json

Serwer NextJS zmodyfikował plik 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"
   ]
}

Utwórz hello.ts

Utwórz hello.ts w katalogu pages / api, który będzie dla nas działał jako usługa odpoczynku.

import { NextApiRequest, NextApiResponse } from 'next'

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

Uruchom serwer Next.js

Uruchom następujące polecenie, aby uruchomić serwer -.

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

Sprawdź wyjście

Otwórz localhost: 3000 / api / hello w przeglądarce, a zobaczysz następujące dane wyjściowe.

{"text":"Welcome to TutorialsPoint"}