Next.js - Supporto TypeScript

Next.js, ha un supporto eccellente per i dattiloscritti. Di seguito sono riportati alcuni passaggi per abilitare il dattiloscritto nel progetto.

Crea tsconfig.json

Crea tsconfig.json nella directory principale. Inizialmente lo teniamo vuoto. Ora avvia il server.

Next.JS rileverà tsconfig.json e mostrerà il seguente messaggio sulla console.

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

Installa il dattiloscritto

Eseguire il comando npm install per installare il dattiloscritto e le librerie correlate.

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

Avvia Next.js Server

Eseguire il comando seguente per avviare il 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

Apri tsconfig.json

Il server NextJS ha modificato il file 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"
   ]
}

Crea hello.ts

Crea hello.ts nella directory pages / api che fungerà da servizio di riposo per noi.

import { NextApiRequest, NextApiResponse } from 'next'

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

Avvia Next.js Server

Eseguire il comando seguente per avviare il 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

Verifica output

Apri localhost: 3000 / api / hello in un browser e vedrai il seguente output.

{"text":"Welcome to TutorialsPoint"}