【イラスト付き】Next.jsの概要を把握する【要点一気読み】
はじめに
皆さんこんにちは。
今回はNext.jsの概要についてご紹介します。
Next.jsはReactをベースとしたフレームワークであり、Reactをより簡単に扱うことができます。
こんな人にオススメ
- Next.jsの概要について理解したい
- Next.jsの記述の雰囲気を確認したい
初めて学習する方にも分かるように、丁寧に解説していきます。
すでに利用している方も、是非一度目を通していただけると嬉しいです。
😋 Next.jsの輪郭を捉えられるようにご紹介します♪
Next.jsとは
まずポイントをチェック
- フルスタックなReactフレームワーク
- Reactをより書きやすく
- 様々な最適化が行われる
Next.jsはReactをベースとしたフレームワークです。クライアント側とバックエンド側の両方を開発できるフルスタックなフレームワークとなっています。１つの環境で開発を進めることができるため、シームレスな作業ができます。
Next.jsはReactをベースとしているため、コーディングはReactの文法に沿って行います。加えて開発者の手間を軽減するための機能が搭載されており、ファイルベースのルーティングなど、開発効率や開発体験の向上が期待できます。またTypeScriptにも標準で対応しています。このようにReactをより書きやすくしています。
Next.jsは開発体験の向上だけでなく、内部で様々な最適化を行います。キャッシュの活用やプリレンダリング、画像サイズの最適化など。これらの仕組みでアプリケーションのパフォーマンスを向上させます。
😋 Next.jsはReactをより扱いやすくし、開発体験やパフォーマンスの向上をしたものです♪
参考リンク集
シンプルなサンプル
まずポイントをチェック
- 「npx create-next-app@latest アプリ名」 でプロジェクトを初期化
- 「npm run dev」 で起動
- Reactと同様にコンポーネントを記述可能
Next.jsでアプリの雛形を作成するには次のコマンドを実行します。実行すると対話形式でその他ツールの導入ついて聞かれますが、デフォルトのままEnterを押下し続けてOKです。
npx create-next-app@latest アプリ名
対話形式で聞かれる設定は次の通りです。
TypeScriptを利用するか（デフォルトでYes）
ESLintを利用するか（デフォルトでNo）
Tailwind CSSを利用するか（デフォルトでYes）
srcフォルダを利用するか（デフォルトでYes）
App Routerを利用するか（デフォルトでYes）
インポートエイリアスの設定（デフォルトは@）
このコマンドを実行すると新しくフォルダが作成され、必要なファイルの作成や依存パッケージがインストールされます。ファイル内容はデフォルトの実装になっているため、作りアプリの仕様に沿って、既存の内容の削除や追記修正を行っていきます。
アプリのフォルダに移動し、次のコマンド実行することでアプリを起動できます。
npm run dev
http://localhost:3000/にアクセスし動作確認ができます。開発用サーバーは変更を検知すると再起動し即座に結果を反映してくれます。
雛形の状態からコードを修正し、シンプルなコンポーネントを作成した例をご紹介します。修正したファイルはsrc/app/page.tsxとsrc/app/globals.cssです。
src/app/page.tsxはルートのUIを表すコンポーネントのファイルです。元々の記述を削除し「HELLO」と表示するだけに修正しました。
const App = () => {
const msg = 'HELLO';
return (
<div>{msg}</div>
)
};
export default App;
src/app/globals.cssはアプリケーション全体のスタイルの定義です。現時点ではスタイルは不要なのでファイル内容を全てコメントアウトしました。
実行結果は画面にHELLOと表示するのみです。
😋 Reactと同様の文法で記述することができます♪
参考リンク集
RSC（React Server Components）
まずポイントをチェック
- コンポーネントにはサーバーコンポーネントとクライアントコンポーネントの区別がある
- レンダリングをサーバーで行うかクライアントで行うかで異なる
- デフォルトではサーバーコンポーネント（RSC）が利用される
- パフォーマンス向上のメリットがある
Next.jsではコンポーネントは２種類に区別されています。サーバーコンポーネントとクライアントコンポーネントに分かれており、レンダリングをどこで行うかで区別されます。
サーバーコンポーネントは、サーバー上でレンダリングを行います。サーバーコンポーネントはReact Server Components（RSC）という技術が使われており、サーバー上でレンダリングされた結果はRSCペイロードというデータ形式になりクライアントに送付されます。クライアントではこのデータを元に画面にコンポーネントを追加します。
クライアントコンポーネントはブラウザでレンダリングを行います。Next.jsのコンポーネントは標準でサーバーコンポーネントです。クライアントコンポーネントでのみ利用可能な機能を利用したい場合に、クライアントコンポーネントを利用します。
Next.jsはRSCを利用しレンダリングを分散することで、クライアント側のJavaScript量を減らしパフォーマンスの向上を行っています。
ブラウザAPIやイベント処理、フック関数などを利用する場合はクライアントコンポーネントを利用します。クライアントコンポーネントを利用する際は「’use client’」をファイルの先頭に記述します。
😋 Next.jsはRSCでパフォーマンス向上を図っています♪
参考リンク集
おわりに
皆さん、お疲れ様でした。
ここまでご覧いただき、ありがとうございました。
Next.jsの概要について確認をしていただきました。
人気も知名度も上がっているNext.jsですが、パフォーマンスだけでなく開発体験も向上する仕組みが取り入れられていました。
😋 これからもプログラミング学習頑張りましょう♪
サンプルコード
Discussion