これから始める、Next.js
- カテゴリー
- JavaScript
- React/Preact
Next.jsの基礎をイチからていねいに解説します。実務で使う人はもちろん、予定はないけれど情報として押さえておきたい人にもぴったりな入門シリーズです。
最終回 Webサイト制作：仕上げ
おさらいを兼ねたWebサイト制作も最後の仕上げです。画像なども読み込んでスタイルを整えていきます。また、最後にこれからのNext.jsの機能についても触れます。
第11回 Webサイト制作：ブログの詳細ページ
これまで解説したNext.jsの機能をおさらいしながら、サイトを制作しています。今回は個別のブログページです。同じフォーマットで内容が違うページをMarkdownのパースを行いながら生成します。
第10回 Webサイト制作：ブログのインデックスページ
これまで解説したNext.jsの機能を使って、実際のサイトを組み立てる解説をします。今回はページのメタ情報編集、ページの遷移、SSGのためのデータ取得を利用しつつ、ブログのインデックスページの実装を行います。
第9回 Webサイト制作：仮ページと共通レイアウト
これまでシリーズで紹介してきた機能をおさらいしながら、Webサイトを作成してみます。この回では導入と、仮のトップページ、ページ間共通で使うレイアウトまでを作成します。
第8回 next/imageコンポーネントと画像の最適化
サイトのパフォーマンスを大きく左右する可能性がある画像を、大きさ、画質、画像形式などさまざまな側面から最適化してくれる新機能を解説します。
第7回 ページのメタ情報を編集する
これまで静的、あるいは動的なページ生成を解説しましたが、その両者に共通のページのメタ情報を付与する方法を解説します。
第6回 Next.jsにおけるCSS
Next.js上でCSSを取り扱うには、いくつかの方法があります。この記事ではCSSを普通に書く方法に加え、CSS Modulesを用いる、CSS is JSの手法を使う方法を解説します。
第5回 SSRのためのデータ取得
静的ページを配信するトレンドがある一方で、更新が頻繁に必要になるページはSSRの検討も必要です。使い分けのポイントも含め、基本的事項を解説します。
第4回 SSGのためのデータ取得
SSRでのページ生成の基礎的な方法を解説します。内部的にデータを受け取る方法と、外部のAPIや、別途用意したJSONファイルからの取得など、いくつかの方法があります。
第3回 ページ間の遷移
Next.jsのページ間の遷移には、遷移先ページの先読み、スクロール位置の制御などさまざまな機能があります。そのうち使用頻度が高いと思われる機能を解説します。
第2回 Next.jsのルーティング
Next.jsは自分でルーティング処理を書かなくても、ルールに従ったファイルの記述や配置で、ルーティングを定義することができます。その方法を解説します。
第1回 Next.jsとは
Next.jsの特徴を簡単なデモを使って確認してみます。Reactをベースとし、用途に合わせSSRやSSGを組み合わせた柔軟なサイト書き出し機能を試してみましょう。