なぜこの記事を書いたのか

React(Next.js)とTypeScriptは相性が良いといわれており、この二つを組み合わせて開発する人も多いため、環境構築する方法を記事としてまとめておきたかった。ただし、今回はDockerなしでの構築とする。

環境構築完了（ゴール）の確認

この記事のゴールは以下のようにReact(Next.js)のページが起動すること。

環境構築の手順

１．React(Next.js)アプリ作成

まずはターミナルを起動してプロジェクトフォルダを作成したいディレクトリへ移動する。今回は「next-ts-redux」という名前のフォルダを作成し、その直下に「app1」という名前のプロジェクトフォルダを作成することにする。

以下のコマンドを実行する。

npx create-next-app app1

コマンドを実行すると以下のような構成でフォルダが作成される。

コマンド実行したディレクトリ
 └ app1
     └┬ next.config.js
      ┝ node_modules
      ┝ package-lock.json
      ┝ package.json
      ┝ public
      ┝ README.md
      ┝ pages
      |   └┬ _app.js
      |    ┝ index.js
      |    └ api
      |        └ hello.js
      └ styles
          ┝ globals.css
          └ Home.module.css

２．アプリを実行する

ディレクトリを「app1」へ移動して、以下のコマンドを実行するとローカルサーバが立ち上がる。

npm run dev

この実行コマンド”npm run dev”や”npm start”はpackage.jsonが存在するディレクトリで実行する必要がある。
理由はこのコマンドはpackage.jsonのscriptの内容を実行しているため。

上記のコマンドを実行したらブラウザで「 http://localhost:3000 」を起動してみよう。

いったん実行中のターミナルで「Control」+「C」キーを同時押しして、実行をキャンセルする。

３．Reactコンポーネントを格納するフォルダの変更

ターミナルにて以下のコマンドを実行して、Reactコンポーネントを格納するpagesフォルダをsrc直下へ移動する。

mkdir src && mv pages src

４．TypeScriptを導入する

以下のコマンドを実行してTypeScriptを導入する。

npm install --save-dev typescript @types/react @types/react-dom

５．TypeScript用のファイル名に変更

以下のファイル名の拡張子をJavaScriptからTypeScript用に変更する。

src/pages/_app.js　→　src/pages/_app.tsx
src/pages/index.js　→　src/pages/index.tsx
src/pages/api/hello.ts　→　src/pages/api/hello.ts

それぞれのtsxファイルをVSCODEで開いて、以下の箇所を修正する。これはもともとJavaScriptで書かれていたプログラムをTypeScriptで動くように変更する作業なので必須。

_app.tsx

// 先頭行に以下を追加
import React from 'react'
import {AppProps} from 'next/app';

// 3行目
// 修正前
import '../styles/globals.css'
// 修正後
import '../../styles/globals.css'

// 5行目
// 修正前
function MyApp({ Component, pageProps }) {
// 修正後
const MyApp = ({Component, pageProps}: AppProps) => {

index.tsx

// 先頭行に以下を追加
import React, {FC} from 'react'

// 3行目
// 修正前
import styles from '../styles/Home.module.css'
// 修正後
import styles from '../../styles/Home.module.css'

// 5行目
// 修正前
export default function Home() {
// 修正後
const Home: FC = () => {

//最終行に以下を追加
export default Home;

６．アプリを実行する

ここでもう一度、ディレクトリを「app1」へ移動して、以下のコマンドを実行する。

npm run dev

上記のコマンドを実行してブラウザで「 http://localhost:3000 」を起動すると、以下のように確認できるはずだ。

ここでtsconfig.jsonが作成されているかを確認しよう。プロジェクトフォルダ「app1」直下にtsconfig.jsonが作成されているはずだ。

これでDockerなしのReact(Next.js)+TypeScriptの環境を構築する手順は以上となる。