これから始める、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を組み合わせた柔軟なサイト書き出し機能を試してみましょう。