はじめに
最近ゆるっとReact/Next.jsとTypeScriptの勉強をしています。
経験者の方々に「どの学習方法がおすすめですか?」と尋ねたところ、皆さん「公式サイトのチュートリアルが一番!」ということで、公式のチュートリアルを進めていくことにします!
Reactとは?
JavaScript言語を用いたWebサイト上のUIを構築するためのライブラリ
Next.jsとは?
Reactベースのフロントエンドフレームワーク
Next.jsの特徴
- サーバーサイドレンダリング(SSR) サーバーサイドでHTMLを動的に生成してクライアントに送信する技術。パフォーマンスを向上出来る、SEOにも有利
- 静的サイト生成(SSG) ビルド時に各ページを静的なHTMLファイルとして事前に生成する技術。ページロードの高速化、サーバー負荷の軽減が出来る
- ファイルベースのルーティングシステム ページコンポーネントをpagesディレクトリに配置するだけで自動的にルートが設定出来る機能。開発の効率性とパフォーマンスを向上出来る
- APIルート APIのエンドポイントを簡単に作成できる機能。例:/pages/api/user.js - /api/userがエンドポイントとなる
- イメージやフォントの最適化が容易 next/Imageコンポーネントやnext/fontモジュールを使うことで自動的に最適化を行なってくれる。
Creating a new project
- npx Node.jsのパッケージ実行ツール npmレジストリに公開されているパッケージをインストールせずに実行できる
- create-next-app Next.jsに必要なパッケージの導入や設定が完了した状態の環境が作れるコマンド
- @latest npmパッケージの最新バージョンをインストールする際に使用されるタグ(他にもnext,beta,alpha等)
※対話形式で一つずつ選択して進めていく方法もある
What is your project named? …
(プロジェクト名は何にする?)
Would you like to use TypeScript? … No / Yes
(TypeScriptを使用する?)
Would you like to use ESLint? … No / Yes
(ESLintを使用する?)
Would you like to use Tailwind CSS? … No / Yes
(Tailwind CSSを使用する?)
Would you like to use src/ directory? › No / Yes
(srcディレクトリを使用する?)
Would you like to use App Router? (recommended) › No / Yes
(App Routerを使用する?)
Would you like to customize the default import alias (@/*)? › No / Yes
(インポートエイリアスをカスタマイズする?)
What import alias would you like configured? ›
(設定したいインポートエイリアスは何?)
※ここで指定した文字をルートディレクトリとする、デフォルトは「@/」
※yarnを使って作ることもできる
開発サーバーを起動する
- Local: http://localhost:3000