Zenn
😽

reactチュートリアル3（Assets, Metadata, and CSS）

2024/05/14に公開
Next.js
tech

NextJSの学習をする。
以下のページを翻訳し記録する。
https://nextjs.org/learn-pages-router/basics/assets-metadata-css

  1. reactチュートリアル1（create a nextjs app）
  2. reactチュートリアル2（Navigate Between Pages）
  3. reactチュートリアル3（Assets, Metadata, and CSS）
  4. reactチュートリアル4（Pre-rendering and Data Fetching）
  5. reactチュートリアル5 (Dynamic Routes)
  6. reactチュートリアル6（API Routes）
  7. reactチュートリアル7（Deploying Your Next.js App）

アセット、メタデータ、CSS | Next.js を学ぶ

追加した 2 番目のページには現在スタイルがありません。CSS を追加してページのスタイルを設定しましょう。

Next.js にはCSSとSassのサポートが組み込まれています。このコースでは CSS を使用します。

このレッスンでは、Next.js が画像などの静的アセットや<title>タグなどのページ メタデータをどのように処理するかについても説明します

このレッスンで学ぶこと

このレッスンでは、次のことを学習します。

  • Next.js に静的ファイル(画像など)を追加する方法。
  • 各ページの<head>内部に表示される内容をカスタマイズする方法。
  • CSS モジュールを使用してスタイル設定された再利用可能な React コンポーネントを作成する方法。
  • グローバル CSS を pages/_app.js に追加する方法。
  • Next.js でのスタイル設定に関する役立つヒント

前提条件

CSS の基本的な知識。このコースでは、Next.js アプリに CSS を追加する方法について説明しますが、CSS の基礎については説明しません。Next.js スタイルに関する詳細なドキュメントをお探しの場合は、CSS ドキュメントを参照してください。

Assets

Next.js は、画像などの静的アセットを最上位publicディレクトリで提供できます。内部のファイルは、pagesと同様にpublicもアプリケーションのルートから参照できます。publicディレクトリはrobots.txtやGoogleのサイト検証などのその他の静的な資産で役立ちます。より深く学習するためにはStatic File Serving
を確認しましょう。

プロファイルピクチャのダウンロード

最初に自分のプロファイル写真を手に入れましょう。

  • 自分のプロファイル写真をダウンロードするか、このファイルを使いましょう。
  • public ディレクトリの中にimagesディレクトリを作りましょう。
  • public/imagesにprofile.jpgとして写真を保存しましょう。
  • 写真はおおよそ400px x 400px のサイズが可能です。
  • public ディレクトリの下の使っていないSVGロゴファイルは削除してよいです。

最適化されていない画像

通常補HTMLではプロファイル写真を以下のように追加できます。

<img src="/images/profile.jpg" alt="Your Name"/>

しかしこれは以下などのマニュアル作業を必要とします。

  • 異なるスクリーンサイズに対して適応的に表示できること
  • 3rdパーティのツールやライブラリに対して写真を最適化すること
  • 表示画面に入ったときだけ画像をロードすること

Image Componentと画像の最適化

next/imageはHTMLの<img>要素の拡張で、モダンウェブ向けの進化です。

Next.jsはデフォルトで画像の最適化をサポートしています。ブラウザがサポートしていればリサイズ、最適化、WebP等の最新のフォーマットの提供ができます。これは小さな画面を持つデバイスに大きな画像を提示してしまうことを避けます。また、これにより新しいイメージフォーマットがブラウザにサポートされるとNextjsは自動的に採用できます。

画像の自動最適化はどのイメージソースにも使うことができます。また、CMS等の外部ソースで提供されている画像も最適化することができます。

Image Componentを使う

ビルド時に画像を最適化する代わりに、Next.jsはユーザのリクエストによって要求を受けた時に画像最適化を実施します。静的サイトジェネレータや静的サイトとは違い、画像が10枚だろうが1000万枚だろうがビルド時間は増えません。

画像はデフォルトで遅延読込されます。つまり、画面外の画像がページのスピードの足かせとなることはありません。

画像はCumulative Layout ShiftやCore Web Vitalを避けて表示されます。

以下の例でプロフィール写真を表示する例を提示します。heightとwidthは希望する表示サイズで、縦横比はソースイメージと同じです。

Note : このコンポーネントは後で使うので、まだコピーする必要はありません。

import Image from 'next/image';

const YourComponent = () => (
  <Image
    src="/images/profile.jpg" // Route of the image file
    height={144} // Desired size with correct aspect ratio
    width={144} // Desired size with correct aspect ratio
    alt="Your Name"
  />
);

画像の自動最適化についてより深く知るにはドキュメントを確認してください。

Image Componentについて知りたい場合はAPI reference for next/imageを確認してください。

Metadata

<title>HTMLタグ等のページのメタデータを変更したい場合はどうでしょうか？
<title>は<head>HTMLタグの一部です。Next.jsで<head>タグを変更する方法を詳しく見てみましょう。

pages/index.jsを開き、以下の行を見つけましょう。

<Head>
    <title>Create Next App</title>
    <link rel="icon" href="/favicon.ico"/>
</Head>

小文字の<head>の代わりに<Head>が使われていることに注意しましょう。 <Head>はNext.jsのビルトインReactコンポーネントです。これによってページのヘッダーを変更することができます。next/headからHeadコンポーネントをインポートできます。

first-post.jsにHeadを追加する

私達はまだ/posts/first-post ルートに<title>を足していませんので、足してみましょう。
pages/posts/first-post.js を開き next/headからのHeadのimportをファイルの先頭に追加しましょう。

次に、エクスポートしたFirstPostコンポーネントをHeadコンポーネントをインクルードするように変更しましょう。単にtitleタグを追加します。

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>First Post</title>
      </Head>
      <h1>First Post</h1>
      <h2>
        <Link href="/">← Back to home</Link>
      </h2>
    </>
  );
}

http://localhost:3000/posts/first-post にアクセスしてみましょう。ブラウザのタブは"First Post"となっているはずです。ブラウザのdeveloper toolsで title tagが <head>に追加していることが確認できます。

更にHeadコンポーネントについて学習したい場合はAPI reference for next/headを確認しましょう。

<html>タグをカスタマイズしたい場合、例えばlang属性を追加したい場合は pages/_document.js ファイルを作る事で実現できます。custom Document documentationで更に学習を進めましょう。

サードパーティjavascript

サードパーティのjavascriptではサードパーティのソースから追加された全てのスクリプトについて言及します。サードパーティのスクリプトは、解析や広告、カスタマーサポートのためのウィジェットなどスクラッチで作る必要のない新しい機能をサイトに追加するために使われます。

サードパーティjavascriptを追加する

Next.jsページにサードパーティのスクリプトを追加する方法を調べましょう。pages/posts/first-post.jsを開き、以下の行を探します。

<Head>
    <title>First Post</title>
</Head>

メタデータに加え、できるだけ早くロードと実行が必要なスクリプトは、通常はページの<head>に追加されます。普通のHTML <script> エレメントを使うと、外部スクリプトは次のようにして追加されます。

<Head>
    <title>First Post</title>
    <script src="https://connect.facebook.net/en_US/sdk.js" />
</Head>

このスクリプトはFacebook SDKを含み、一般的にFacebookのソーシャルプラグインやその他の機能を導入するために使われます。このやり方で動きますが、このやり方では同じページから収得されたjavascriptコードに関してロードする場合に明確な方法がわかりません。もし、特定のスクリプトがレンダリングをブロックしページコンテンツのロードを遅らせると、パフォーマンスに多大な影響を与えます。

Script Componentを使う

next/scriptはHTMLのscriptエレメントの拡張で追加のスクリプトがフェッチされ実行された時に最適化されます。

同じファイルの先頭にnext/scriptからのインポートを追加します。

import Script from 'next/script';

Script コンポーネントを含めtえ、FirstPostコンポーネントを更新します。

export default function FirstPost() {
    return (
        <>
            <Head>
                <title>FirstPost</title>
            </Head>
            <Script
                src="https://connect.facebook.net/en_US/sdk.js"
                strategy="lazyOnload"
                onLoad={()=>
                    console.log(`script loaded correctly, window.FB has been polypated`)
                }
            />
            <h1>First Post</h1>
            <h2>
                <Link href="/"><-Back to home</Link>
            </h2>
        </>
    )
}

Scriptコンポーネントに追加の属性があることに注意してください。

  • strategy はサードパーティスクリプトがいつロードされるべきかをコントロールします。lazyOnloadはNext.jsにこのスクリプトをアイドル時間に読み込むように指示します。
  • onLoadはスクリプトのロードが終了したあと即座にどの様なjavascriptでも実行するために使われます。

http://localhost:3000/posts/first-postにアクセスしてみましょう。ブラウザのデベロッパーツールでコンソールパネルで見ることができます。さらに、グローバル変数で生成されたwindow.FBの実行ができます。

Note:Facebook SDKはパフォーマンス的な方法でサードパーティスクリプトを追加する方法を説明するためだけに使われています。これでサードパーティ関数をNext.js煮含める方法を理解しました。続ける前にscriptコンポーネントを削除できます。更に学習するにはdocumentationを確認しましょう・

CSS Styling

見たらわかるように我々のページ(http://localhost:3000)は既に何らかのスタイルを持っています。ファイル構造をみると、2つのCSSファイルを持つstylesフォルダが見られます。global.cssとHome.module.cssです。もしない場合は以下のコードでプロジェクトをダウンロードできます。

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/assets-metadata-css-starter"

CSS modules によって、ユニークなクラス名を自動生成することでコンポーネントレベルでCSSをローカルスコープとすることができます。これによってクラス名の衝突を気にすることなく同名のCSSクラス名を使うことができます。

CSSモジュールに加えて、Next.jsアプリケーションを様々な方法でスタイリングできます。

ここでは、Next.js内でCSS modulesとSassを使う方法について説明します。

Layout Component

最初に全てのページで横断的に共有されるLayoutコンポーネントを作りましょう。

  • componentsと呼ばれるトップレベルディレクトリを作ります
  • componentsに次の内容のlayout.jsファイルを作ります
export default function Layout({children}){
    return <div>{children}</div>
}

次に、pages/posts/first-post.js を開きLayoutコンポーネントのインポートを追加し、最も外側のコンポーネントにします。

import Head from 'next/head';
import Link from 'next/link';
import Layout from '../../components/Layout'

export default function FirstPost() {
    return (
        <Layout>
            <Head>
                <title>First Post</title>
            </Head>
            <h1>First Post</h1>
            <h2>
                <Link href="/">← Back to home</Link>
            </h2>
        </Layout>
    );
}

CSSを追加する

ではLayout componentにスタイルを追加してみましょう。そのためにCSS Moduleを使います。これによってReactコンポーネントからCSSファイルをインポートできるようになります。

components/layout.module.cssファイルを次の内容で作ります。

.container {
    max-width: 36rem;
    padding: 0 1 rem;
    margin: 3rem auto 6rem;
}

重要 CSS Moduleを使うにはCSSファイル名は .module.css で終わる必要があります。

components/layout.jsの中でこのコンテナクラスを使うには以下を実施する必要があります

  • CSSファイルをインポートしstyles等の名前を割り当てます
  • クラス名としてstyles.containerを使います

components/layout.jsを開き内容を以下に書き換えます。

import styles from './layout.module.css';

export default function Layout({children}){
    return <div className={styles.container}>{children}</div>
}

http://localhost:3000/posts/first-postに行くと、
テキストが中央に配置したコンテナの内部にあることがわかります。
alt text

ユニーククラス名の自動生成

ブラウザのdevtoolsでHTMLを見てみるとLayoutコンポーネントで描画されたdivはlayout_container__...のような名前のクラスを持つことがわかります。
alt text

これがCSS Modulesがすくことです。自動的にユニークなクラス名を作ります。CSS Modulesを使う限りは名前の衝突を気にする必要はありません。

更には、Next.jsのコード分割機能がはたらきます。これによりそれぞれのページで最低限の量のCSSがロードされることが保証され、これによってバンドルサイズが小さくなります。

CSS Modulesはビルド時にjavascriptのバンドルから抽出され、next.jsによって自動ロードされる、.cssファイルが生成されます。

Global Styles

CSS Modules はコンポーネントレベルのスタイルとしては便利です。しかし、全てのページになんらかのCSSをロードすることもできます。

global CSSをロードするには、pages/_app.jsファイルを作り、次の内容を記載しましょう。

export default function App({Component, pageProps}) {
    return <Component {...pageProps}/>;
}

_app.jsのdefault export は全てのページをアプリケーションに包み込むトップレベルのリアクトコンポーネントです。このコンポーネントはページ感を遷移する時に状態を意地するためや、ここで実施するようにglobalスタイルを追加するために使います。_app.jsについてもっと学びましょう。

開発サーバーのリスタート

重要: pages/_app.jsを追加したら、開発サーバーをリスタートする必要があります。Crtl+cでサーバーを止め、npm run devでサーバーを開始します。

Global CSSの追加

NextjsではグローバルCSSを追加する子ができます。pages/_app.jsからのみインポートでき、他のどこからもインポートできません。

global CSSがpages/_app.jsの外でインポートできないのは、global CSSがページのすべての要素に影響するからです。

もしhomepageから/posts/first-postに移動したら、homepageのglobal stylesは意図せず/posts/first-postに影響を与えるかもしれません。

global CSSはどこにでもどの様な名前でも配置できます。以下の作業をやってみましょう。

  • トップレベルのstylesディレクトリとglobal.cssファイルを作る
  • styles/global.cssにいかのCSSを追加します。このコードはいくつかのスタイルをリセットし、タグの色を変更します。
html,
body {
  padding: 0;
  margin: 0;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    Fira Sans,
    Droid Sans,
    Helvetica Neue,
    sans-serif;
  line-height: 1.6;
  font-size: 18px;
}

* {
  box-sizing: border-box;
}

a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}

最後にCSSファイルをpages/_app.jsからインポートしましょう。

// `pages/_app.js`
import '../styles/global.css';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

これで、http://localhost:3000/posts/first-postにアクセスすればスタイルが設定されていることが見られます。_app.jsインポートされた全てのスタイルがすべてのページに適応されます。

alt text

もし適応されない場合は、開発サーバーを再起動してみましょう。

Layoutをより美しく

これまではCSS Modules等のコンセプトを見せるために最小のReactとCSScodeを追加してきました。次のdata fetchingに進む前にスタイリングとcodeを美しくしましょう。

components/payout.module.cssを更新する

最初にcomponents/layout.module.cssを開き、次のより洗練されたスタイルに更新しましょう。

.container {
  max-width: 36rem;
  padding: 0 1rem;
  margin: 3rem auto 6rem;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.backToHome {
  margin: 3rem 0 0;
}

styles/utils.module.cssを作る

次にCSSユーティリティのクラスを作りましょう。これは複数のコンポーネントで使い回すことができます。次の無いよ言うのstyles/utils.module.cssファイルを作ります。

.heading2Xl {
  font-size: 2.5rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.05rem;
  margin: 1rem 0;
}

.headingXl {
  font-size: 2rem;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.05rem;
  margin: 1rem 0;
}

.headingLg {
  font-size: 1.5rem;
  line-height: 1.4;
  margin: 1rem 0;
}

.headingMd {
  font-size: 1.2rem;
  line-height: 1.5;
}

.borderCircle {
  border-radius: 9999px;
}

.colorInherit {
  color: inherit;
}

.padding1px {
  padding-top: 1px;
}

.list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.listItem {
  margin: 0 0 1.25rem;
}

.lightText {
  color: #666;
}

これらのユーティリティクラスはアプリケーション横断的に再利用でき、global.cssファイルでも使うことができます。ユーティリティクラスは関数というよりはCSSセレクターを書くアプローチに近いです。更に学ぶにはこちらutility-first CSS

3つ目にcomponents/layout.jsを開き以下のようにcodeを変更します。

import Head from 'next/head';
import Image from 'next/image';
import styles from './layout.module.css';
import utilStyles from '../styles/utils.module.css';
import Link from 'next/link';

const name = 'Your Name';
export const siteTitle = 'Next.js Sample Website';

export default function Layout({ children, home }) {
  return (
    <div className={styles.container}>
      <Head>
        <link rel="icon" href="/favicon.ico" />
        <meta
          name="description"
          content="Learn how to build a personal website using Next.js"
        />
        <meta
          property="og:image"
          content={`https://og-image.vercel.app/${encodeURI(
            siteTitle,
          )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
        />
        <meta name="og:title" content={siteTitle} />
        <meta name="twitter:card" content="summary_large_image" />
      </Head>
      <header className={styles.header}>
        {home ? (
          <>
            <Image
              priority
              src="/images/profile.jpg"
              className={utilStyles.borderCircle}
              height={144}
              width={144}
              alt=""
            />
            <h1 className={utilStyles.heading2Xl}>{name}</h1>
          </>
        ) : (
          <>
            <Link href="/">
              <Image
                priority
                src="/images/profile.jpg"
                className={utilStyles.borderCircle}
                height={108}
                width={108}
                alt=""
              />
            </Link>
            <h2 className={utilStyles.headingLg}>
              <Link href="/" className={utilStyles.colorInherit}>
                {name}
              </Link>
            </h2>
          </>
        )}
      </header>
      <main>{children}</main>
      {!home && (
        <div className={styles.backToHome}>
          <Link href="/">← Back to home</Link>
        </div>
      )}
    </div>
  );
}

ここで新しく導入されたのが

  • ページコンテンツを説明するmeta tags(og:image等)
  • タイトルと画像のサイズを調整するブール型のhome属性
  • homeがfalseの場合の"Back to home"リンク
  • priority属性でnext/imageで事前ロードされるimages

pages/index.jsを更新する

最後にホームページを更新しましょう。
pages/index.jsを開き以下のように更新します。

import Head from 'next/head';
import Layout, { siteTitle } from '../components/layout';
import utilStyles from '../styles/utils.module.css';

export default function Home() {
  return (
    <Layout home>
      <Head>
        <title>{siteTitle}</title>
      </Head>
      <section className={utilStyles.headingMd}>
        <p>[Your Self Introduction]</p>
        <p>
          (This is a sample website - you’ll be building a site like this on{' '}
          <a href="https://nextjs.org/learn">our Next.js tutorial</a>.)
        </p>
      </section>
    </Layout>
  );
}

[Your Self Introduction]をあなたの自己紹介で置き換えましょう。
以上です！layout codeは洗練化され、次のデータ取得のレッスンに進む準備ができました。
このレッスンのまとめをする前にNextjsのCSSサポートに関連する便利なテクニックについて次のページで学びましょう。

Styling Tips

いくつかの便利なスタイリングのヒントを紹介します。
続くセクションは読むだけでコードの変更はいりません！

クラスを切り替えるためにclsxライブラリを使う

clsxはクラス名を簡単に変えることができるシンプルなライブラリです。npm installやyarn add clsxでインストールできます。

更に詳細にはdocumentを参照してください。基本的な使い方は

  • successかerrorとなるtypeを受け入れるAlertコンポーネントを作ることを考えます。
  • successの場合は文字色を緑とし、errorの場合は赤とします。

CSSモジュール(例えばalert.module.css)を次のように書くことができます。

.success {
    color: green;
}
.error {
    color: red;
}

そしてclsxは以下のように使います

import styles from './alert.module.css';
import {clsx} from 'clsx'

export default function Alert({children, type}){
    return (
        <div
            className={clsx({
                [styles.success]: type === 'success',
                [styles.error]: type === 'error',
            })}
        >
            {children}
        </div>
    )
}

PostCSSコンフィグのカスタマイズ

Next.jsはPostCSSを使い、設定無しでCSSをコンパイルします。PostCSSの設定をするためにpostcss.config.jsという名前のトップレベルファイルを作成します。これはTailwind CSS等のライブラリを使っている場合にとても便利です。

以下にTailwind CSSを追加する手順を記載します。まずはパッケージをインストールします。

npm install -D tailwindcss autoprefixer postcss

次にpostcss.config.jsを作ります。

// postcss.config.js
module.exports = {
    plugins: {
        tailwindsss: {},
        autoprefixer: {},
    },
}

更にtailwind.config.jsでオプションを設定することでconfiguring content sourcesすることをおすすめします。

// tailwind.config.js
module.exports = {
    content: [
        './pages/**/*.{js,ts,jsx,tsx}',
        './components/**/*.{js,ts,jsx,tsx}',
        // For the best performance and to avoid false positives,
        // be as specific as possible with your content configuration.
    ]
}

PostCSS設定についてさらに学習するにはdocumentation for PostCSSを参照してください。

Tailwind CSSを簡単に始めるためにはサンプルを参照してください.

Sassを使う

Next.jsは.scssと.sass拡張子を使うことで、Sassをインポートできます。CSS Modules、.module.scssあるいは.module.sass拡張子によって、コンポーネントレベルのSassを使うことができます。

Next.jsのビルトインSassサポートを使うにはsassをインストールすることを忘れないでください。

npm install -D sass

以上です！
NextjsのビルトインCSSサポート、CSSモジュールについてさらに学習するにはCSS Documentationを参照してください。

Discussion