メインコンテンツまでスキップ

3. Basic

Pagesとルーティング​

Next.jsは、ファイルベースのルーティングを採用しています。pagesディレクトリ内のファイルとフォルダ構造がそのままルートとしてマッピングされます。

使用例​

// pages/index.js
export default function Home() {
  return <h1>Home Page</h1>;
}

// pages/about.js
export default function About() {
  return <h1>About Page</h1>;
}

上記の例では、/ルートにアクセスするとHomeコンポーネントが、/aboutルートにアクセスするとAboutコンポーネントが表示されます。

Pre-rendering​

Next.jsは、静的生成（Static Generation）とサーバーサイドレンダリング（Server-Side Rendering）の両方をサポートしています。これにより、SEOとパフォーマンスが向上します。

Static Generation（SG）​

ビルド時にHTMLを生成する方法です。静的サイトのように高速にページを提供します。

使用例​

// pages/index.js
export async function getStaticProps() {
  return {
    props: {
      message: "Hello, world!",
    },
  };
}

export default function Home({ message }) {
  return <h1>{message}</h1>;
}

Server-Side Rendering（SSR）​

リクエストごとにHTMLを生成する方法です。リアルタイムのデータが必要な場合に使用します。

使用例​

// pages/index.js
export async function getServerSideProps() {
  return {
    props: {
      message: "Hello, world!",
    },
  };
}

export default function Home({ message }) {
  return <h1>{message}</h1>;
}

API Routes​

Next.jsでは、APIルートを作成してサーバーレスファンクションを定義できます。pages/apiディレクトリ内にファイルを作成することで、APIエンドポイントを追加できます。

使用例​

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello, world!' });
}

上記の例では、/api/helloにアクセスすると、{ message: 'Hello, world!' }というJSONレスポンスが返されます。

動的ルーティング​

Next.jsでは、ファイル名にブラケットを使用して動的ルートを定義できます。たとえば、ユーザープロファイルページを動的に生成する場合などに使用します。

使用例​

// pages/users/[id].js
import { useRouter } from 'next/router';

export default function User() {
  const router = useRouter();
  const { id } = router.query;

  return <h1>User ID: {id}</h1>;
}

上記の例では、/users/123のようにアクセスすると、User ID: 123が表示されます。

Custom DocumentとCustom App​

Next.jsでは、_document.jsと_app.jsを使用して、HTMLドキュメントのカスタマイズやグローバルなレイアウト、状態管理を設定できます。

Custom Document​

_document.jsを使用して、HTMLドキュメントの<html>や<body>タグをカスタマイズできます。

使用例​

// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link rel="stylesheet" href="/styles/global.css" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Custom App​

_app.jsを使用して、ページ間で共有されるレイアウトや状態を設定できます。

使用例​

// pages/_app.js
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

このように進めていきます。他に追加や修正の希望があればお知らせください。