Next.js で React を学ぶメリットを紐解く 🔰

今回の記事では、 Next.js を使って React を学ぶメリットを、
Next.js の公式ページ から紐解いていきます。

結論 React は Next.js を使って学ぶと、学習効率がよい 👨‍💻

理由

素の React を使って学ぶと、 React の構文以外の部分でつまずきがち。

Next.js を使えば、 React 単体での開発で必要とされていた、複雑かつ量の多い設定を Next.js が自動で行ってくれるので、React の構文を学ぶことに集中できる。

例えば・・・

具体的に React の構文以外で初心者には難しい部分を挙げるなら・・・

ルーティングの記述( UI と Url の紐付け)
CSS を使用するための webpack の設定
SSR の記述 ets

Next.js 公式 から紐解く初心者に対するメリット３つ✨

先にあげた Next.js 公式のトップページには、Next.js を使うべき主な理由が１２項目記されています。

そのうち特に初心者が恩恵を受ける項目は以下の３つ 🌟🌟🌟

Zero Config 🌟

Automatic compilation and bundling. Optimized for production from the start.
設定不要
コンパイルとバンドルは自動。最初から開発に最適化されています。

開発を行う前に必要なたくさんの設定を自動で最適化してくれるため、準備でつまずいて、構文を学ぶところへ辿り着けない、なんてことになりません。

File-system Routing 🌟

Every component in the pages directory becomes a route.
ファイルシステムルーティング
pagesディレクトリ内のすべてのコンポーネントがルートになります。

複雑な React の ルーティング （表示 UI の切り替え）も、 Next.js なら、ファイルシステムの規則に沿って自動生成されるので、構文の学習に集中できます。

Built-in CSS Support 🌟

Create component-level styles with CSS modules. Built-in Sass support.
Sass CSS が ビルトイン
ビルトインされた Sass CSS モジュールを使用してコンポーネントレベルのスタイルを作成できる。

React でのスタイリングにはさまざまな Saas が存在しますが、CSS Modules がビルトインなので設定を行うことなく今まで通りのCSSが書けます。

以上 ３つの理由から、初心者こそ、 Next.js のフレームワークを使って、React を学ぶべきだということがわかると思います。

おまけ 🍖

以下、 Next.js 公式ページの残りの説明です

まずは看板文章ですが、

The React Framework for Production

プロダクション向けReactフレームワーク

Next.js gives you the best developer experience with all the features you need for production:
Next.jsは、本番環境に必要なすべての機能を備えた最高の開発体験を提供します。

hybrid static & server rendering,
SSG および SSR によるレンダリング

TypeScript support,
タイプスクリプトサポート

smart bundling,
スマートバンドル

route pre-fetching,
ルートプリフェッチング

and more.
などなど

No config needed.
それらに設定は必要ありません。

とありますが、

React 単体での開発で必要とされていた、複雑かつ量の多い設定を、Next.js が自動で行ってくれるので、機能開発の本質的な部分に集中できますよ、もっというと、 React での開発が楽チンになりますよ、ということですかね 👀

そして、

Why Next.js
The world’s leading companies use and love Next.js
なぜ Next.js が世界をリードする企業に選ばれ、愛されているのか

というお題で、具体的な１２項目を説明されています 👑
それでは先にあげた３項目を除く、残り９項目ざっくりみていきましょう 👍

Image Optimization

<Image> and Automatic Image Optimization with instant builds.
画像の最適化
<Image>とインスタントビルドによる自動画像最適化。

Internationalization

Built-in Domain & Subdomain Routing and Automatic Language detection.
国際化対応
組み込みのドメインおよびサブドメインルーティングと自動言語検出。

Next.js Analytics

A true lighthouse score based on real visitor data & page-by-page insights
正確なアナルティクス
実際の訪問者データとページごとのインサイトに基づいた lighthouse スコア

Hybrid: SSG and SSR

Pre-render pages at build time (SSG) or request time (SSR) in a single project.
SSG と SSR を適宜使用できる
単一のプロジェクトでビルド時（SSG）またはリクエスト時（SSR）にページを事前レンダリングします。

Incremental Static Generation

Add and update statically pre-rendered pages incrementally after build time.
ISG が使える
ビルド時に静的に事前レンダリングされたページを段階的に追加および更新します。

TypeScript Support

Automatic TypeScript configuration and compilation.
タイプスクリプトに対応
TypeScriptの自動構成とコンパイル。

Fast Refresh

Fast, reliable live-editing experience, as proven at Facebook scale.
高速な更新
Facebookの規模で証明されているように、高速で信頼性の高いライブ編集が可能。

API Routes

Optionally create API endpoints to provide backend functionality.
API Routes
オプションで、APIエンドポイントを作成してバックエンド機能を提供します。

Code-splitting and Bundling

Optimized bundle splitting algorithm created by the Google Chrome team.
コード分割とバンドル
GoogleChromeチームによって作成、最適化されたバンドル分割アルゴリズム