Reactのフレームワーク”Next.js”を触ってみた

弊社チーフエンジニア（みーや）のやってみた！をご紹介
今回はReactのフレームワークである「Next.js」を公式チュートリアルをもとに触ってみました。

Part1.

普段の開発ではReactを使用しているのですが、最近フロントエンド関連の記事でNext.jsをよく目にするようになったので、基本的な機能をチュートリアルを通して触ってみて知ったことをまとめたいと思います。

Next.jsはReactベースのフレームワークです。
公式の導入部分にて、Reactを使ってWebアプリケーションを開発する際の考慮点を取り上げた上で、Next.jsはそれらをすべて解決してくれると紹介されていました。

続きはこちら→

Part2.

今回は4つ目の pre-rendering and Data Fetching です。

1. Create a Next.js App
2. Navigate Between Pages
3. Assets, Metadata, and CSS
4. Pre-rendering and Data Fetching
5. Dynamic Routes
6. API Routes
7. Deploying Your Next.js App

Next.jsではデフォルトですべてのページにおいてpre-renderingが有効になっています。 pre-renderingにより、ページのHTMLを事前に生成するためクライアントサイドですべてのJavaScriptを実行するのに比べて、パフォーマンスもSEOも良くなります。

続きはこちら→