zuka-e
commented
2 years ago 主要機能概要
Zero Config
SSG (Static Site Generation)
ページ表示に必要なデータを事前に取得しHTMLを生成する。
getStaticProps: ビルド時にデータ取得getStaticPaths: データに基づきページを生成
ISR (Incremental Static Regeneration)
指定時間経過後にページの再生成を行う。
Dynamic Routes
Built-in Components
Head
- React Helmet Async と同様の役割
Router
- React Router Dom と同様の役割
Image
- Improved Performance: Always serve correctly sized image for each device, using modern image formats.
- Visual Stability: Prevent Cumulative Layout Shift automatically.
- Faster Page Loads: Images are only loaded when they enter the viewport, with optional blur-up placeholders
- Asset Flexibility: On-demand image resizing, even for images stored on remote servers
移行方法
- Migrating to Next.js: Migrating from Create React App | Next.js
- Migrating to Next.js: Migrating from React Router | Next.js
参考
- GitHub: https://github.com/vercel/next.js
- Docs: https://nextjs.org/docs
- Examples: https://github.com/vercel/next.js/tree/canary/examples
- Starter Kit: https://github.com/vercel/commerce
- Next.js Tutorial for Beginners - YouTube
- Next.js Crash Course 2021 - YouTube
- Next.js Crash Course for Beginners 2021 - YouTube
概要
Create React App で作成したアプリをNext.jsで再構成し、表示速度の向上などを図る。 初めにNext.jsの特徴や利点の理解を進める。