株式会社ウエディングパーク's job postings
弊社チーフエンジニア(みーや)のやってみた!をご紹介
今回はReactのフレームワークである「Next.js」を公式チュートリアルをもとに触ってみました。
Part1.
普段の開発ではReactを使用しているのですが、最近フロントエンド関連の記事でNext.jsをよく目にするようになったので、基本的な機能をチュートリアルを通して触ってみて知ったことをまとめたいと思います。
Next.jsはReactベースのフレームワークです。
公式の導入部分にて、Reactを使ってWebアプリケーションを開発する際の考慮点を取り上げた上で、Next.jsはそれらをすべて解決してくれると紹介されていました。
続きはこちら→
Part2.
今回は4つ目の pre-rendering and Data Fetching です。
- Create a Next.js App
- Navigate Between Pages
- Assets, Metadata, and CSS
- Pre-rendering and Data Fetching
- Dynamic Routes
- API Routes
- Deploying Your Next.js App
Next.jsではデフォルトですべてのページにおいてpre-renderingが有効になっています。 pre-renderingにより、ページのHTMLを事前に生成するためクライアントサイドですべてのJavaScriptを実行するのに比べて、パフォーマンスもSEOも良くなります。
/assets/images/9813452/original/b706054e-5700-4a09-a555-a24bbac15db0.png?1656649090)