Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
10
Help us understand the problem. What is going on with this article?
@GenTamura84

Next.jsではじめるTypeScript

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

テーマ

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

10
Help us understand the problem. What is going on with this article?
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
10
Help us understand the problem. What is going on with this article?