Next.js

Next.jsを始めるための事前学習

 

Next.jsを使用するためには事前知識として、JavaScriptやReactの知識、Web開発の知見を知っておくことで開始しやすくなります。

ただJavaScriptやReactをどれくらい知っていればNext.jsを始める土俵に立てるのか目安が欲しいと思いました。

そこでNext.jsが用意しているReact Foundationsを通して、Next.jsを使い始める前のJavaScript、Reactの知識を体系的にかつ無駄なく学びたいと思います。

見出し
  1. 前提
  2. コースの学習
  3. まとめ

前提

自身の環境

Node.js：22.12.0
OS：M2 Mac OS

事前知識

HTMLとCSSが読んで書けることを前提としたコースになります。

コースの学習

チャプター１：
https://nextjs.org/learn/react-foundations/what-is-react-and-nextjs

Reactとは？

ReactはUI機能に特化したJavaScriptライブラリです。

ライブラリはUIの開発に便利な機能を提供しますが、どこにどのくらい使用するのかは開発者に委ねられています。

その柔軟性によりReactを使用したサードパーティが多数生まれており、Next.jsもその一つです。

ただReactのみでは開発において、まだ掛ける時間と労力が多く残ります。

Next.jsとは？

Next.jsはWebアプリケーションを開発する上で必要な機構を提供するReactフレームワークです。

フレームワークとして、Reactを使用する上で必要かつ便利な構成と機能を提供し、さらにReactのみでは足りていない機能の部分を補完しています。

チャプター２：
https://nextjs.org/learn/react-foundations/rendering-ui

UI要素の作成と読み込み

Reactがどう働いているか理解する上で、まずブラウザで取得したコードからどうUIに変換しているのか理解する必要があります。

ユーザがWebページにアクセスすると、サーバーがHTMLを返却しブラウザでそのHTMLをもとにDOM（Document Object Model）を作成します。

DOMとは、HTML要素を表現するツリー構造を持ったコードとUIの橋渡し役となるものです。

DOMをJavaScriptで操ることでユーザイベントを受け取り、DOMの要素を追加したり、削除したり、その要素のスタイルや内容を変更することができます。

チャプター３：
https://nextjs.org/learn/react-foundations/updating-ui-with-javascript

JavaScriptでUIを更新する

HTMLは初期の読み込みページを表現しているのに対して、DOMはJavaScriptで更新後のページのコンテンツを表しています。

JavaScriptでDOMを更新する作業をとても強力ですが、冗長的になりがちです。アプリケーションやチームが成長していくとともに、アプリケーションを作り上げていく手間も大変になってきます。

プログラミングには、命令型と宣言型があります。命令型はどうUIを更新するのかその手順を書いていく方法に対して、宣言型は何をUIで表現するのかその結果を指定するような方法になります。

宣言型の方がUIを操作する上ではより効率的に開発をすることができ、Reactは宣言型でUIを組み立てることができるライブラリになります。

チャプター４：
https://nextjs.org/learn/react-foundations/getting-started-with-react

Reactを使用する

Reactを使用するには2つのパッケージが必要になります。

  • react：Reactのコアライブラリ
  • react-dom：ReactでDOMを操作するためのライブラリ

JSXとは？

JSXとは、JavaScriptでUIを表現するためのHTMLのように記述できる構文のことです。

ただブラウザはJSXを理解できないため、BabelのようなJavaScriptのコンパイラで通常のJavaScriptに変換してあげる必要があります。

Reactを使用する上で参考になるJavaScriptのTopic

チャプター５：
https://nextjs.org/learn/react-foundations/building-ui-with-components

コンポーネントでUIを作成する

Reactの重要なコンセプトとしては、以下の3つがあります。

  • Components
  • Props
  • State

コンポーネント – Components

コンポーネントとは、それ自体が1つのUI要素として再利用可能なコードの集まりです。コンポーネントを組み合わせることでアプリケーションを作り上げるメリットとしては、修正が必要になった時そのコンポーネントを修正し、それ以外を修正せずに更新を行えることです。

チャプター６：
https://nextjs.org/learn/react-foundations/displaying-data-with-props

プロップス – Props

コンポーネントに対して定義された引数とその渡される値のことです。Propsは呼出元から呼び出されるコンポーネントに対しての片方向の値の受け渡しを意味しています。

チャプター７：
https://nextjs.org/learn/react-foundations/updating-state

ステート – State

Stateはコンポーネントが持つ値とその状態のことです。画面でのユーザ操作などによって遷移するコンポーネントの状態を表すことができます。

チャプター８：
https://nextjs.org/learn/react-foundations/from-react-to-nextjs

ReactからNext.jsへ

これまで学んできた知識を使っても、Reactで充実したアプリケーションを作るにはまだ手間が少なからずかかります。

Reactはサーバーコンポーネント（Server Components）とクライアントコンポーネント（Client Components）という機能が用意されており、これはフレームワークを必要とします。この点において、Next.jsが必要なセットアップなどを行い、追加の機能を提供することでReactでのアプリケーション作成を手助けします。

チャプター９：
https://nextjs.org/learn/react-foundations/installation

Next.jsのインストール

npmなどのパッケージマネージャーでインストールします。

  • package.jsonを用意（内容は”{}”（空の波括弧））
  • 以下のコマンドを実行
    • npm install react@latest react-dom@latest next@latest

チャプター１０：
https://nextjs.org/learn/react-foundations/server-and-client-components

Server ComponentsとClient Componentsの違い

主に2つの観点において違いがあります。

  • ソースコードが実行される環境：サーバーとクライアント
  • ネットワーク

チャプター１１：
https://nextjs.org/learn/react-foundations/next-steps

ここまででNext.jsを使用する上で重要になるJavaScriptとReactのコンセプトを、それらを段階的にJavaScriptからReact、ReactからNext.jsのアプリケーションへと変換していくことで学んできました。

次のステップ

このコースでは、次のステップとして以下の2つをおすすめしています。

  • React Documentation：Reactについてさらに知識を深めたい方
  • Learn Next.js Tutorial – Building a dashboard app：Next.jsでのより実践的なアプリ開発を学びたい方

まとめ

以上で、Next.jsで用意された事前に必要になるJavaScriptとReactの知識を知るためのチュートリアルが完了になります。

記事の中でも書かれている通り、この他にも学ぶべきそれぞれのツールのトピックがたくさんありますが、Next.jsを導入する目安として良い学習になるのではないかと感じています。