見出し画像
Photo by zeroka

Next.js 入門（ざっくり）

有馬広郷

Next.jsは、Reactベースのフレームワークで、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）などの機能を提供します。SEO対策やパフォーマンス向上が求められるアプリケーションに非常に有用です。

1. 環境設定

まず、Node.jsとnpm（またはyarn）がインストールされていることを確認してください。

2. Next.jsプロジェクトの作成

プロジェクトディレクトリを作成し、Next.jsをセットアップします。

npx create-next-app my-next-app
cd my-next-app
npm run dev

これにより、`http://localhost:3000`で開発サーバーが起動します。

3. ディレクトリ構成

Next.jsの主なディレクトリ構成は以下の通りです：

  • `pages/`: ページコンポーネントを配置するディレクトリ。ファイル名がURLパスになります。

  • `public/`: 静的ファイル（画像、フォントなど）を配置します。

  • `styles/`: グローバルなCSSファイルやモジュールCSSファイルを配置します。

4. 基本的なページの作成

`pages/index.js`を編集して、簡単なページを作成してみましょう。

import Head from 'next/head';

export default function Home() {
  return (
    <div>
      <Head>
        <title>My Next.js App</title>
      </Head>
      <main>
        <h1>Welcome to My Next.js App</h1>
      </main>
    </div>
  );
}

5. リンクの使用

内部リンクには`next/link`を使用します。

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>Welcome to My Next.js App</h1>
      <Link href="/about">
        <a>About Page</a>
      </Link>
    </div>
  );
}

新しいページ`pages/about.js`を作成して、リンク先の内容を表示します。

export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page of the application.</p>
    </div>
  );
}

6. スタイルの適用

Next.jsでは、グローバルCSSやCSSモジュールを使用できます。

グローバルCSS

`styles/globals.css`を作成し、以下の内容を追加します：

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

このファイルを`pages/_app.js`でインポートします：

import '../styles/globals.css';

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

export default MyApp;

CSSモジュール

CSSモジュールを使用するために、`Home.module.css`というファイルを作成し、以下の内容を追加します：

.container {
  text-align: center;
}

.title {
  color: blue;
}

これを`index.js`でインポートして使用します：

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

export default function Home() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Welcome to My Next.js App</h1>
    </div>
  );
}

7. データフェッチング

Next.jsは、データフェッチングのためのいくつかのメソッドを提供しています：

  • `getStaticProps`: ビルド時にデータを取得し、静的ページを生成します。

  • `getServerSideProps`: リクエストごとにデータを取得し、サーバーサイドでレンダリングします。

getStaticPropsの例

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

export default function Home({ data }) {
  return (
    <div>
      <h1>Data from API</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}


以上、アウトプットがてらざっくり書いてみました。

公式ドキュメント: Next.js Documentation

この記事が気に入ったらサポートをしてみませんか？