Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

もう一度Next.jsのlearn courseをやりながら要点をまとめる | Next.js 12.x その0004

ページ遷移にnext/linkコンポーネントを使う

import Link from 'next/link';

Assets, Metadata, and CSS (アセット、メタデータCSS) について

画像の表示にnext/imageコンポーネントを使う

import Image from 'next/image';

headタグをページごとにカスタマイズするときにnext/headコンポーネントを使う

Third-Party JavaScriptのページに書いてあった。headタグ内にscriptタグを入れたい場合に以下のようにする。

import Head from 'next/head';

scriptタグを挿入したい場合はnext/scriptコンポーネントを使う

Third-Party JavaScriptのページに書いてあった。

import Script from 'next/script';

SCSSについて

Next.jsはデフォルトで.scss拡張子をサポートしている

Layoutコンポーネントの作り方

components/layoutsディレクトリを作成して、その中にchildrenを受け取るコンポーネントを普通に作るだけ

グローバルCSSについて

pages/_app.tsxで以下のようにcssをインポートする。

import '../styles/global.css';

PostCSS 構成のカスタマイズについて

PostCSS 構成をカスタマイズするには、postcss.config.js を使用する。

これは Tailwind CSS などのライブラリを使用している場合に便利です。

Pre-rendering and Data Fetching (事前レンダリングとデータ取得) について

これから読む。