Create a Next.js Appを読む
https://nextjs.org/learn/basics/create-nextjs-app
1ページ目
https://nextjs.org/learn/basics/create-nextjs-app
React で Web アプリを作るときに注意すること
webpack でバンドルする必要がある
Babel などでコードを変換する必要がある
コード分割させる必要がある
パフォーマンスとSEOを考慮して静的に事前レンダリングさせる必要がある
アプリをデータストアに接続させるためにサーバー側のコードを書く必要がある
上記は Next.js で解決できる
ルーティング
事前レンダリング・SSG、SSR両方が各ページでサポート
ページ読み込みを高速化させるためのコード分割
クライアントサイドのルーティング
CSS、Sass、CSS in JS
開発環境は Fast Refresh
API ルート
2ページ目
https://nextjs.org/learn/basics/create-nextjs-app/setup
code:command
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
3ページ目
https://nextjs.org/learn/basics/create-nextjs-app/welcome-to-nextjs
http://localhost:3000 にアクセスするとNext.js に関する情報へのリンクが設置されている
Getting Started | Next.js
Introduction | Learn Next.js
next.js/examples at deprecated-main · vercel/next.js
New Project – Vercel
4ページ目
https://nextjs.org/learn/basics/create-nextjs-app/editing-the-page
Fast Refresh で編集後すぐにブラウザ側に反映される