Help us understand the problem. What is going on with this article?

Next.jsではじめるTypeScript

今回は、Next.jsを利用して、TypeScriptに挑戦しようという記事です :elephant:

テーマ

  • TypeScriptの第一歩をNext.jsで整えよう

対象読者

  • JavaScriptわかる
  • Reactそこそこわかる
  • Next.js触ったことある
  • TypeScript初心者

ぐらいを想定です。

前提条件

  • node.jsインストール済み

プロジェクト作成

ディレクトリつくる

$ mkdir awesome-pjt && cd awesome-pjt

プロジェクト作成

$ npm init -y

ライブラリインストール

$ npm install --save next react react-dom

Next.jsのコマンド追加

$ vim package.json
package.json
{
  ...
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  ...
}

Next.jsのエントリーファイルを作成

$ mkdir pages && touch pages/index.js

ファイル編集(JavaScript)

$ vim pages/index.jsx
index.jsx
import React from 'react';

const Index = () => {
  return (
    <div>Hello, World</div>
  );
};

export default Index;

ローカルサーバ起動

$ npm run dev

http://localhost:3000にアクセスすると、Hello, Worldが表示されます。

ここまでが Next.jsJavaScript で利用した場合です。
続いて、TypeScriptを利用した場合にしてみましょう。

ファイル名変更(TypeScript)

$ mv pages/index.jsx pages/index.tsx

型ファイルライブラリをインストール

$ npm install --save-dev typescript @types/react @types/node

configファイルを作成

$ touch tsconfig.json
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",
    "allowSyntheticDefaultImports": true
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ]
}

エントリーファイルを更新

$ vim pages/index.tsx

返すコンポーネントに型情報を追加

index.jsx
import React from 'react';

const Index = (): JSX.Element => {
  return (
    <div>Hello, World</div>
  );
};

export default Index;

ローカルサーバ再起動し、http://localhost:3000で、Hello, Worldが表示されれば、成功です。


(補足)自動生成定義ファイル

next-env.d.ts が自動生成されますが、TypeScriptがコンパイル時に生成しているファイルです。
Next.jsで、以下のように書かれています。

Note: Next.js will create a file named next-env.d.ts in the root of your project. This file ensures Next.js' types are picked up by the TypeScript compiler.

You cannot remove this file, however, you can edit it (but don't need to).


以上になります :elephant:

もし、参考になった場合は、「いいね」のボタンを押してもらえると嬉しいです:relaxed:
最後まで、お読みいただいてありがとうござました:grinning:

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした