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”
