Zenn
Open12

Next.js入門

Next.js
はらまきはらまき

Next.jsのLinkコンポーネントでページ遷移をするとリロードが行われない
通常のHTMLタグaでページ遷移をするとリロードが行われる

はらまきはらまき

静的リソース

Next.js は、ルートディレクトリの public フォルダ下で、画像などの静的ファイルを配信できる。public 内のファイルは、ベース URL(/)から始まるコードで参照できる。

例えば、 public/me.png に画像を追加した場合、次のコードで画像にアクセスする。

import Image from 'next/image'

function Avatar() {
  return <Image src="/me.png" alt="me" width="64" height="64" />
}

export default Avatar

公式

はらまきはらまき

Metaデータは<Head>コンポーネントの中に書いていく。

import Head from 'next/head';

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <p>Hello world!</p>
    </div>
  );
}

export default IndexPage;

公式

はらまきはらまき

Next.jsは、拡張子.module.cssを使用するCSSモジュールをビルトインでサポートしています。
CSSモジュールは、一意のクラス名を自動的に作成することで、CSSを局所的にスコープします。これにより、衝突を心配することなく、異なるファイルで同じクラス名を使用することができます。この動作により、CSSモジュールはコンポーネントレベルのCSSをインクルードする理想的な方法となります。

公式：Styling: CSS Modules | Next.js

はらまきはらまき

SSG

Next.js 12

  • getStaticPropsを使う

公式

ページから getStaticProps（静的サイト生成）という関数をエクスポートすると、Next.js はビルド時に getStaticProps から返される props を使ってプリレンダリングします。

export async function getStaticProps(context) {
  return {
    props: {}, // ページコンポーネントに props として渡されます。
  }
}

Next.js 13以降

  • getStaticPropsは使わないらしい
  • 詳細はまたあとで
はらまきはらまき

Next.js 13での変更点

appフォルダ

  • layout.tsx
    • ページ全体に関わるレイアウト設定
    • 以前は_app.tsx(js) や_document.tsxに記述していた
    • 以前は<Head>コンポーネントの中に書いていたが、layout.tsx内の以下のような書き方に変更
export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};
  • page.tsx
    • app/[hoge]/page.tsxとした場合に[hoge]の部分がpathとなる
    • 以前のバージョンならindex.tsx
  • appディレクトリ配下はサーバサイドレンダリング（SSR）される
    • クライアントサイドレンダリング（CSR）をしたい場合はページの先頭にuse clientを付ける必要がある
    • 公式
'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}