【TS学習:no.2】Next.jsの環境構築入門
typescriptが貼り始め、フレームワークもいろいろと進化してきました。vue.jsやreact.jsをはじめとして、従来のフレームワークをもとにして、効率化や速度の向上などがされています。その中でも、最近よく聞くNext.jsを今回使ってみました。
Next.jsとは？、は説明するのがめんどくさいので、書かない
〇〇とは？みたいな記事はどこにでも載っているので、ここで書くことはやめておきます。その代わり、Next.js入門関連の記事を貼っておきます。
- Next.js by Vercel - The React Framework
- Next.jsを使うべき5つの理由 + 実装Tips
- Next.jsとは？JavaScriptフレームワークについて解説
Next.jsは、従来のreactアプリから、進化して機能性を活かしつつも、開発しやすく、実践的で、快適なUXを実装することができます。
Next.js×TypeScript
この組み合わせにする理由をしっかり答えられる人は意外と少ないのではないかと思います。Next.js×TypeScriptは、「開発効率の高さ」と「優れたUXの実装」を可能とするフロントエンド開発だからだといえます。
この組み合わせで、簡単な実装から、他のものも組み合わせたものを解説しながら記事にしようと思います。
ということで、実装に入ります。
※前提
- macbookでの開発手順になりますので、terminalのコマンドなどがwindowsと多少異なることがありますので、そこはよろしくお願いいたします。
参考文献→ターミナルvsコマンドプロンプト 主要13コマンド早見表 - typescriptのコンパイルやnode.jsなど環境については、省きます。
参考文献→TypeScriptはじめてみた 〜環境構築〜
書くまでもない環境構築
このページに基本的なnext.jsのサポートとしてTypeScriptでの最低限の環境構築が書いてあります。
でも一応書きます。
所定のterminalまで行き、フォルダを作る（省略可能）
mkdir app_name
cd app_name
TypeScriptでのNext.jsのプロジェクトの構築
npx create-next-app@latest --ts
# or
yarn create next-app --typescript
# or
pnpm create next-app --ts
> What is your project named? …
と出てきたら、projectの名前を書きましょう。今回の記事では、next-appで進めます。その後に、next-appの中に入って、ts.configファイルを作ります。（現在では、勝手に作られていることがあります。）
cd next-app
tsconfig.jsonは、JSへのコンパイルが必要なファイルおよび、それらのコンパイルオプションなどを指定するファイルです。それを作成。(※上のページにはこのコマンドがあるが、現在では省略できる）
touch tsconfig.json
そのままnpm run dev実行して、http://localhost:3000/ にアクセス
npm run dev
それで結果、このような画面が出てきたら、最低限の環境は構築できました。
<実行画面>
ここからは何がしたいのかによって、変わるので、ご注意
レンダリング（もとになる情報を整形して表示すること）手法がここからは異なります。すなわち、どんなページを作るか？です。
- SSG(Static Site Generation)
- CSR(Client Side Rendering)
- SSR(Serever Side Rendering)
- ISR(Incremental Static Regeneration)
のような4つのレンダリング手法が存在します。なんだそれ？？と思った方、諦めないでください！笑
これらについては、別の記事で書いておきましたので、ぜひ読んでみてください。
Discussion