SSR フレームワーク `Next.js` を使って `React` を快適ルーティング part1

はじめに

Next.js のチュートリアルをただ翻訳しながら紹介するだけです
https://nextjs.org/learn/basics/create-nextjs-app
MacOS 前提
Node.js と npm を事前にインストールしてください

Next.js とは

Next.js は React を使って SSR (サーバサイドレンダリング)アプリケーションを構築できる軽量フレームワークになります。
すぐに使えるスタイルやルーティングのソリューションを含んでいるため、手軽にスタイルを適用したり、ページ遷移を実装できます。
サーバ環境としては、 Node.js を利用することが想定されています。

SPA と SSR と React

通常 React 単体ではすべての JS や CSS 、 HTML を一気に読み込むいわゆる SPA なので、初回アクセスが遅いといった問題があります。
これを解決するために誕生したのが SSR であり、パフォーマンス改善の他、SEO に強くなるといった特徴があります。
また、 React 単体でルーティングを実現しようとすると React Router が有名ですが、これはページ遷移のたびにブラウザリロードが走ってしまうため、パフォーマンスがよくありませんでした。Next.js ではそういった部分も改善されているため、ぜひ触ってみながら体験してみましょう。

Next.js と Gatsby

Next.js は Gatsby と比較されることがよくあります。 Gatsby はランディングページなどの静的Webサイトを構築するにはとても快適なのですが、ページが複数あるようなWebアプリケーションを構築すると Next.js の方に軍配が上がります。

Next.js アプリを作成する

Next.js アプリを作成する

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

開発サーバーを実行する

cd nextjs-blog
npm run dev

Next.js へようこそ

ブラウザで http://localhost:3000/ にアクセスする

ページの編集

pages/index.js を以下のように変更する
ホットリロードが効いているので、ブラウザに即時反映されます。

pages/index.js

“Welcome to”
↓
“Learn”

続く...