こんにちはかみむらです。
最近はTypeScriptを採用する企業が増えてきました。TypeScriptの型システムは、サーバーサイドだけでなく、フロントエンドでも恩恵を受けることができます。そのため、各フロントエンドのフレームワークで、TypeScriptを簡単に導入できる環境が整ってきました。
特にNext.jsはフロントエンドとサーバーサイドの機能を持っているので、TypeScript化が必須だと思われます。
今回はNext.jsにTypeScriptを導入していきます。
Next.jsの公式ドキュメント
nextjs.org
Next.jsのTypeScript化
Next.jsではファイルの拡張子が.tsまたは、.tsxだと自動的にtsconfig.jsonを生成してくれます。なので、pagesフォルダのindex.jsの拡張子をtsxに変えてみましょう。
pages/index.tsx
import React, {FC} from 'react' import Head from 'next/head' const Home: FC = () => ( <div> <Head> <title>Home</title> <link rel="icon" href="/favicon.ico" /> </Head> <div>Home</div> </div> ) export default Home
一旦これでアプリケーションを起動してみます。
$ yarn dev
すると、ターミナル上でエラーが発生します。内容はTypeScriptに必要なライブラリが足りないといったところです。
なので、エラーに従って必要なライブラリをインストールします。
$ yarn add --dev typescript @types/react @types/node
そして、再度アプリケーションを立ち上げてみましょう。tsconfig.jsonが作成されます。
アプリケーションを停止して、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" }, "exclude": [ "node_modules" ], "include": [ "next-env.d.ts", "**/*.ts", "**/*.tsx" ] }
これで、Next.jsアプリケーションを簡単にTypeScript化できました。
srcフォルダに移動
最後におまけですが、Next.js 9.1からsrcフォルダがサポートされています。Reactプロジェクトはsrcにソースコードを置いておくのが一般的なので、Next.jsでもsrcにまとめてみましょう。pagesフォルダとcomponentsフォルダをsrcフォルダに移動してみましょう。
Next.js 9.1 | Next.js
srcフォルダを作成します。
$ mkdir src
そして、pagesフォルダとcomponentsフォルダをsrcフォルダに移動します。
$ mv pages components src
そして、アプリケーションを立ち上げてみましょう。無事にアプリケーションを起動できることが確認できます。
$ yarn dev
最後に
今回はTypeScriptの対応とsrcフォルダへ移動について書きました。Next.jsはリリース頻度も高く、フレームワークとして日々進化してる実感がします。今後もNext.jsの記事を増やしていきたいです。
