Nextの初期構成についてまとめてみた

背景
script
pagesディレクトリ
- src/pages/_app.tsx - 初期化処理
  - src/pages/_app.tsx - 特別なコンポーネント
- src/pages/index.tsx - メインコンテンツ
続く…
- コメント
- プログラミングスクールのご紹介 (卒業生より)
参考

背景

実務ではReactを使っているのですがNext.jsのキャッチアップしておきたいと思ったので、その内容を整理したいと思います。

本記事では、Next.jsに関する情報をまとめています。

内容は易しめです。

script

package.jsonに記載されたスクリプト

npm run dev - 開発環境用のサーバー起動

**npm run dev** を実行することで、開発用のサーバーが起動し、Next.jsアプリケーションが開発中に実行されます。

このサーバーは、常に"pages"ディレクトリ内のファイルを監視しており、ファイルを変更するたびにアプリケーションを再読み込みするため、リアルタイムにソースの反映を確認しながら開発を進めることができます。

npm run build - 本番環境用にビルドする

Next.jsアプリケーションを本番環境用にビルドするために使用されます。

buildを実行することで、Next.jsアプリケーションがJavaScriptファイルにコンパイルされて最適化されたアセットが生成されます。

本番環境でのアプリケーションのパフォーマンスを向上させるために生成されたアセットが使用されます。

npm run start - 本番環境用にビルドする

Next.jsアプリケーションを本番環境で実行するために使用されます。

npm run startを実行するには、まずnpm run buildを使用して、アプリケーションをビルドする必要があります。”

**npm run start**を実行すると、生成されたアセットをサーブするためのサーバーが起動します。

開発環境で使用するのはnpm run devのみ

**npm run dev**は開発環境での使用を想定したコマンドです。

buildやstartは本番環境での使用を想定したコマンドのため開発では使用しません。

pagesディレクトリ

ReactやNext.jsではpagesディレクトリでアプリケーションのコードを管理します。

**create-next-app**で作成した初期状態のNext.jsアプリを見ていきます。

my-app/
├── .gitignore    # ignore
├── README.md # README
├── node_modules/ # パッケージの依存関係が格納されるフォルダ
├── package.json  # 依存関係やスクリプトなどの設定ファイル
├── tsconfig.json # TypeScriptの設定ファイル
├── public/       # 静的ファイルを格納するためのフォルダ
│   ├── favicon.ico
│   └── vercel.svg
└── src/
    ├── pages/    # 各ページのコンポーネントを格納する
    │   ├── api/  # APIを実行する関数を管理する
    │   │   └── hello.tsx
    │   ├── app.tsx
    │   ├── document.tsx
    │   └── index.tsx
    ├── styles/   # スタイルシートを格納する
    │   ├── Home.module.css
    │   └── globals.css
    └── types/    # 型定義を格納する
        └── index.d.ts

src/pages/_app.tsx - 初期化処理

以下はNext.jsアプリケーションのエントリーポイントである_app.tsxファイルです。

# src/pages/_app.tsx

import '@/styles/globals.css'
import type { AppProps } from 'next/app'

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

"next/app"からインポートされた**AppProps**を使用して、Appコンポーネントを定義しています。

Appコンポーネントは、Componentコンポーネントをレンダリングし、pagePropsを渡すことでアプリケーション全体で共通のコンポーネントとプロパティを設定を行います。

src/pages/_app.tsx - 特別なコンポーネント

このファイルは、Reactコンポーネントをエクスポートしていますが、Next.jsでは特別なルールがあり、_app.tsxという名前のファイルで定義されたコンポーネントは、アプリケーション全体のレイアウトや設定を行うために使用されます。

そのため、このファイルで定義されたコンポーネントは、アプリケーション全体で共通するものであり、ページごとのコンポーネントとは異なります。

src/pages/index.tsx - メインコンテンツ

Webページに表示されるコンテンツ部分のコードです。

import Head from 'next/head'
import Image from 'next/image'
import { Inter } from 'next/font/google'
import styles from '@/styles/Home.module.css'

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
        <div className={styles.description}>
略...
          </div>
        </div>

        <div className={styles.center}>
          <Image
            className={styles.logo}
            src="/next.svg"
            alt="Next.js Logo"
            width={180}
            height={37}
            priority
          />
        </div>

        <div className={styles.grid}>
          <a
            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={styles.card}
            target="_blank"
            rel="noopener noreferrer"
          >
            <h2 className={inter.className}>
              Docs <span>-&gt;</span>
            </h2>
            <p className={inter.className}>
              Find in-depth information about Next.js features and&nbsp;API.
            </p>
          </a>
略
          <a
            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={styles.card}
            target="_blank"
            rel="noopener noreferrer"
          >
            <h2 className={inter.className}>
              Deploy <span>-&gt;</span>
            </h2>
            <p className={inter.className}>
              Instantly deploy your Next.js site to a shareable URL
              with&nbsp;Vercel.
            </p>
          </a>
        </div>
      </main>
    </>
  )
}

Headコンポーネント

Next.jsが提供する固有のコンポーネントであり、ページのhead要素を設定するために使用されます。

ページタイトル、メタタグ、スタイルシート、スクリプトなどの情報を動的に設定することができます。

import Head from 'next/head'

<Head>
  <title>Create Next App</title>
  <meta name="description" content="Generated by create next app" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" href="/favicon.ico" />
</Head>

Imageコンポーネント

Next.jsが提供する固有のコンポーネントであり、イメージを遅延読み込みし、レスポンシブにサイズ変更することができます。これによってパフォーマンスが向上します。

# import Image from 'next/image'

<Image
  className={styles.logo}
  src="/next.svg"
  alt="Next.js Logo"
  width={180}
  height={37}
  priority
/>

CSS Modules

CSS Modulesは、JavaScriptのモジュールシステムとCSSの機能を組み合わせたCSS管理方法です。

クラス名の競合を回避し、コンポーネント単位でスタイルを管理することができます。

メリットは以下です。

CSSがコンポーネント単位でローカルにスコープされるため、同じクラス名を別のコンポーネントで使用していても、影響を受けなくなる
コンパイル時にクラス名が生成されて実行時に適用されることで、クラス名が一意となるため、クラス名の競合を回避することができます。
CSS Modulesをインポートして、クラス名を呼び出して指定することでCSSが明示的になり、コードの保守性が向上します。

Reactで設定しようとするとWebpackの設定など大変なのですが、Next.jsではビルトインサポートされています。

**src/styles/Home.module.css**で定義したCSSクラスを読み込んでいます。

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

<main className={styles.main}>
  <div className={styles.description}>

上記ではstylesとネーミングされていますがclassesとネーミングするプロジェクトもあるようですね。

こちらの動画ではHome.module.cssにすべてクラスをまとめるのではなく、各CSS Modules をコンポーネントや用途に分けて管理していましたが、そのほうが管理しやすいなと思いました。

https://www.youtube.com/watch?v=5bI7nnrK8Q4

続く…

本記事の内容は以上になります！

続きのアウトプットも随時更新したいと思います。

間違いがありましたら修正いたしますので、ご指摘ください。

興味があれば他の記事も更新していきますので是非ご覧になってください♪

プログラミングスクールのご紹介 (卒業生より)

お世話になったプログラミングスクールであるRUNTEQです♪

https://runteq.jp/r/ohtFwbjW

こちらのリンクを経由すると１万円引きになります。

RUNTEQを通じて開発学習の末、受託開発企業をご紹介いただき、現在も双方とご縁があります。

もし、興味がありましたらお気軽にコメントか、TwitterのDMでお声掛けください。

https://twitter.com/outputky

参考

https://nextjs.org/docs

Yanonoblog!

こつこつと