この講座はYouTubeで動画形式でも用意しています。合わせてご覧ください。

はじめに

このシリーズでは、React × Next.jsを実務で使えるようになることを目指します。Next.jsの公式チュートリアルをもとに、ブログサイトの作成を通してNext.jsを学んでいきましょう。

対象者

プログラミング経験者
JavaScriptを学んだことがある人
モダンなフロントエンド開発を学びたい人

Next.jsを使う5つの理由

Next.jsを用いるにはいくつかの利点があります。ここでは5つ紹介します。

利点1: Reactでの開発

Reactは最もメジャーなフロントエンドフレームワークの1つで、広く開発に用いられています。Next.jsはReactの上に構築するフレームワークであるため、Reactの知識を活かすことで学習コストを抑えて開発が可能です。

利点2: 環境構築の容易さ

一般にフロントエンド開発ではwebpackなど様々なツールを用いるため、それぞれに合わせて設定ファイルを用意する必要があります。Next.jsは、こうした設定ファイルを自動的に組み込む「ゼロコンフィグ」という仕組みを用意しているため、すぐに開発に取り掛かることができるためとても便利です。

利点3: 情報量の多さ

GitHubの実装例やネット上の記事などの情報量が多く、問題解決がしやすいです。特に、公式チュートリアルが充実している点は初心者にとっては魅力的でしょう。

利点4: SEOに強いWebサイトが作成可能

SEOとは、「検索エンジン最適化」のことで、Googleなどの検索結果の上位に表示されるように工夫することを言います。Reactのみで構築されたサイトは、SPA(Single Page Application)と言ってSEOに弱いという弱点があります。一方で、Next.jsではReactを使用しつつもSSR(Server Side Rendering)等の技術によってSEOに強いサイトを構築できます。

利点5: 企業による開発

Next.jsは、Vercelという企業が主体となって開発が続けられているため、安定してメンテナンスが行われるという安心感があります。途中で放棄されたり、脆弱性対応が遅れるといったリスクが少ないです。

競合ツール

Next.jsと機能面で類似したツールもいくつか存在するため、比較として紹介します。

create-react-app

React公式の環境構築ツールです。ゼロコンフィグでReactの環境を作ることができます。

Gatsby

GraphQLという最近人気のクエリ言語を用いて静的サイトを構築できます。SSRも可能ですが、SSG(Static Site Generator; 静的サイトジェネレーター)を強みとしています。Reactをベースとしており、Next.jsと非常に近いツールです。

Nuxt.js

ReactではなくVue.jsをベースに構築されるフレームワークです。Next.jsに強く影響を受けており、SSRやゼロコンフィグといったNext.jsと同様の特徴を持っています。

Next.jsプロジェクトの作成

事前準備

Node.js (バージョン10.13以上) が必要です。

テンプレートからプロジェクトを作成

ターミナルを開き、次のコマンドでnextjs-blogというディレクトリにテンプレートを用いてプロジェクトを作成します。今回はいくつかのツールが既に導入した状態のテンプレートを用意しました（ツールについては後述）

npm init next-app nextjs-blog --example "https://github.com/redimpulz/nextjs-blog-ts"

nextjs-blogディレクトリ内にプロジェクトが作成されます。作成されたディレクトリへ移動します。

cd nextjs-blog

npmスクリプトを用いて開発サーバーを起動してみましょう。

npm run dev

きちんと動作していれば、ブラウザでhttp://localhost:3000を開くとページが見えるはずです。

停止するときは、ターミナルでControl + Cを入力しましょう。

開発ツール

今回用意したテンプレートには、次のテンプレートを導入しています。

TypeScript : JavaScriptに静的型付け機能を導入。
ESLint : 静的コード分析。構文チェックなどを行いバグの事前検知に有用。
Prettier : コードフォーマッター。整形機能によってスペースや括弧の置き方といった書式の統一が可能。

それぞれの設定ファイルは、tsconfig.json, .eslintrc, .prettierrcとしてテンプレートに導入済みですので、設定を作ることなくそのまま各ツールを利用できます。

まとめ

React × Next.jsでの開発の概要とプロジェクトの作成方法を解説しました。次回はテンプレートには導入済のReact × Next.jsの開発を便利にする開発ツールを詳しく紹介します。

React × Next.js 実践開発入門 #1 導入/プロジェクトを作成しよう