Next.js - TypeScript Desteği

Next.js, typcript için execellent desteğine sahiptir. Aşağıda, projede typcript'i etkinleştirmenin birkaç adımı vardır.

Tsconfig.json oluşturun

Kök dizinde tsconfig.json oluşturun. Başlangıçta boş tutuyoruz. Şimdi sunucuyu başlatın.

Sonraki. JS, tsconfig.json dosyasını algılayacak ve konsolda aşağıdaki mesajı gösterecektir.

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

Tipleri yükle

TypeScript ve ilgili kitaplıkları yüklemek için npm install komutunu çalıştırın.

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 Sunucusunu Başlatın

Sunucuyu başlatmak için aşağıdaki komutu çalıştırın -.

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 dosyasını açın

NextJS sunucusu tsconfig.json dosyasını değiştirdi.

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

Merhaba.ts oluşturun

Pages / api dizininde bizim için bir dinlenme hizmeti olarak hareket edecek merhaba.ts oluşturun.

import { NextApiRequest, NextApiResponse } from 'next'

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

Next.js Sunucusunu Başlatın

Sunucuyu başlatmak için aşağıdaki komutu çalıştırın -.

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

Çıkışı Doğrula

Bir tarayıcıda localhost: 3000 / api / merhaba açın ve aşağıdaki çıktıyı göreceksiniz.

{"text":"Welcome to TutorialsPoint"}