【React】Next.jsを事始める（インストール、ページ設定、表示まで）

Reactの続きです。前回はReactのSPA環境で動的OGPを設定したがうまくいかず、Topページのみに静的OGPを設定しました。それで気になったのがNext.js。SSRだとサーバ上にNode環境が必要だがSSGならローカル環境で完結するかもしれない。それではいきましょう！

【目次】

前回のおさらい
Next.jsとは
Next.jsをインストールコマンド
トップページ（index.js）を作る
別ページ（other.js）を作る
GitHubにコミットをプッシュ
最後に

※参考：前回記事
【React】OGPはつらいよーSPAでの動的OGP・失敗編ー（Reactアプリスターターキット） - クモのようにコツコツと

※参考：Reactを習得するためにやったことまとめ
qiita.com

前回のおさらい

ReactのSPA環境で動的OGPを設定したがうまくいかず、Topページのみに静的OGPを設定

※参考：【React】OGPはつらいよーSPAでの動的OGP・失敗編ー（Reactアプリスターターキット） - クモのようにコツコツと

Next.jsとは

Reactで動的OGPを設定するのは一筋縄ではいかなそう。。

SPA時代のOGPとの戦い方 from Yoichi Toyota

www.slideshare.net

※参考：SPA時代のOGPとの戦い方

SPA（シングルページアプリケーション）にReact-routerでルーティング設定するのではなく、Next.jsで最初からMPA（マルチページアプリケーション）として作る。

※参考：Getting Started | Next.js

なんと、有志によってドキュメントが日本語訳もされていた！

※参考：はじめに | Next.js

SSR（サーバサイドレンダリング）だとサーバ側をNode環境にする必要があるが、SSG（静的サイト生成）だとローカル環境でHTMLがレンダリングされる。これでページごとの動的OGP設定も可能になるのでは。

SPA: HTMLをブラウザ側でレンダリングする
SSR: HTMLをサーバ側（Node環境）でレンダリングする
SSG: HTMLをローカル環境でレンダリングする

SSGは以前作ったメタ言語環境（モジュールをローカル環境で静的なHTMLにコンパイル）と似た使い心地かもしれない。

※参考：【メタ言語】HTMLテンプレートエンジン、AltCSS、AltJSのまとめ（随時更新） - Qiita

Next.jsは学習コストがどのくらいあるのかわからず慎重姿勢だったが、どうやらコアなコンポーネント設定はReactと変わらなそうに見受けられた。それなら内堀（コンポーネント設定）はそのままに外堀（複数ページ設定）のみが変わる、という使い心地になりそうな気がしてきた。

Next.jsをインストールコマンド

実際に触ってみる。まずはインストールから。

※参考：はじめに | Next.js

Next.jsもReactと同じく「Create Next App」というパッケージ環境が用意されている。

$ npx create-next-app

もう一つ、ゼロからマニュアル的に作っていく方法もある。まずはこちらから体験。

「next-test」というフォルダを作り、そこに移動して

$ cd /(パス)/next-test

まずはpackage.jsonを作成

$ npm init -y

次にNext.jsとReactとReact DOMをインストール

$ npm install next react react-dom

package-lock.jsonとnode-modulesフォルダができた！ f:id:idr_zz:20210419061720j:plain
node-modulesの中にはいろんなモジュールがインストールされている。

package.jsonのscriptsにdev、build、startコマンドを追加（testは元から入っていた）

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },

Next.jsの起動やビルドを実行するコマンドだな。

トップページ（index.js）を作る

Next.jsのページファイルは「pages」フォルダに作る。トップページは「index.js」（.jsxじゃなくていいんだ？）
f:id:idr_zz:20210419062922j:plain

「index.js」にHomePageコンポーネントを作成

function HomePage() {
  return <div>ねくすと・じぇいえす事始め!</div>;
}

export default HomePage;

普通のReactの関数コンポーネントのようだ。

ローカル環境でNext.jsを起動

$ npm run dev

ブラウザのhttp://localhost:3000/を開くと
f:id:idr_zz:20210419063644j:plain
おお、ページが表示された！

Dev-toolsを見ると #__nextというタグの中にレンダリングされている。 f:id:idr_zz:20210419063708j:plain
それ以外にもいろんなコードが生成されている。

別ページ（other.js）を作る

別ページもつくる。

※参考：Basic Features: Pages | Next.js

「pages」フォルダの中に「other.js」を作り、Otherコンポーネントを作成

function Other() {
    return <div>
            <p>ここは別のページだよ〜ん</p>
            <p><a href="/">戻る</a></p>
        </div>;
  }

  export default Other;

Topページに戻るパスは/でいいのかな。

ブラウザのhttp://localhost:3000/otherを開く
f:id:idr_zz:20210419065000j:plain
おお、ページが表示された！

Dev-toolsを見ると、お、これも#__nextとうタグの中にレンダリングされている。
f:id:idr_zz:20210419065114j:plain

「戻る」を押すとTopページに戻れた！ f:id:idr_zz:20210419063644j:plain

GitHubにコミットをプッシュ

ここまでのコード（GitHub）

※参考：GitHub - ryo-i/next-test at 728aa80773dbbb81366d2207da5c5f52acca805f

静的HTMLのビルドやGitHub Pagesへのデプロイをやってみたいが、今回はここまで。

GitHubに「node_modules」や「.next」のフォルダを含まないよう「.gitignore」を作成する。

いつも参考にしている「gitignore.io」にはNext.jsの設定がないようだったので

※参考：gitignore.io - Create Useful .gitignore Files For Your Project

こちらの事例を参考にした。

※参考：Code Conqueror | Blog

// .gitnignore
# next.js build output
.next

# dotenv environment variables file (build for Zeit Now)
.env
.env.build

# Dependency directories
node_modules/

# Logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*