LoginSignup
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@minoru_kinugasa(minoru Kinugasa_)

NextJSで静的ページを公開するまで【Page Router】

Posted at

はじめに

Next.jsとは、数あるフロントエンドフレームワークの中で6年連続使用率1位を獲得しているほど現在人気を博している、非常に優れたフレームワークです！
引用: https://2023.stateofjs.com/ja-JP/libraries/front-end-frameworks/

今回はそんなNext.jsを使用してサイト作成の基礎を学ぶことを目指します！

さっそく、基礎知識としていくつかの用語を解説していきます！

ReactとNext.jsの違い

Next.jsの開発をしているとよくReactというライブラリが出てきます。
初めはReactとNext.jsが混同されることが多かったので、ざっくりと何が違うのかをお伝えします！

React・・・UIを表示するためのコンポーネントを作成するライブラリ
Next.js・・・ルーティングやSEO、レンダリング方式を簡単に扱えるフレームワーク

このように、Reactで作成した部品をNext.jsでアプリやサイトに組み込んでいくという関係です。
はじめはざっくりとこれがわかっていれば大丈夫だと思います！

Page Router、App Routerとは？

この記事で作成するものはPage Routerを使用したWebページになります。

具体的に何が違うのかというと、静的ページか動的ページかの違いで、
めっちゃ簡単にいうとただのWebサイトか、アプリかの違いです！

なぜ分ける必要があるのかというと、ユーザーに表示する際のレンダリング方式が異なるためです。

レンダリング方法とは？

そもそもレンダリングとは、プログラムを画面に表示できる形に変換するプロセスを指します。
Page RouterとApp Routerのレンダリング方式の違いは以下の通りです。

Page Router・・・SSG (Static Site Generation)
App Router・・・SSR (Server Side Rendering)

SSGは事前にビルドを行います。
ビルドは、ソースコードが完成して公開する前に一度だけ行います。
ユーザーがURLにアクセスした際、事前にビルドしたものを即座に提供します。
そのため、全てのユーザーに同じ内容を見せるポートフォリオサイトやLPサイトなどに使用されます。

SSRはユーザーがアクセスするたびにビルドを行います。
ユーザーがURLにアクセスした際、毎回ビルドしてからデータを提供します。
そのため、ユーザーごとに異なる内容を見せるアプリケーションに使用されます。

プロジェクトの作成

それではさっそく開発の準備を進めていきます！

環境確認

Next.jsプロジェクトの作成にはnpx、
動作環境としてNode.jsが必要です！

node -v # バージョンが表示されていればOK
v21.7.3

npm -v # バージョンが表示されていればOK
10.8.2

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

Next.jsのコードをまとめるディレクトリを作成します！
任意の場所に移動し、特に指定がない場合はデスクトップなどわかりやすい場所に以下のコマンドを実行します。

npx create-next-app next-site

# 実行後、選択肢が表示されるので以下のように選択してください。
Ok to proceed? (y) y

✔ Would you like to use TypeScript? … No
# TypeScriptを使用しますか？

✔ Would you like to use ESLint? … No
# ESLint (コードチェックツール) を使用しますか？

✔ Would you like to use Tailwind CSS? … No
# Tailwind CSS (CSSフレームワーク) を使用しますか？

✔ Would you like your code inside a `src/` directory? … Yes
# コードを`src/`ディレクトリに格納しますか？

✔ Would you like to use App Router? (recommended) … No
# App Router (ルーティング) を使用しますか？

✔ Would you like to use Turbopack for `next dev`? … No
# Turbopack (ビルドツール) を使用しますか？

✔ Would you like to customize the import alias (`@/*` by default)? … No
# インポートエイリアスをカスタマイズしますか？

すると、next-siteというディレクトリが作成されます！

今回は next-site というプロジェクト名で作成しましたが、
プロジェクトの命名は自由です！

次に、作成したプロジェクトに移動します。

cd next-site

インストールが完了した段階ですでにNext.jsのデモページが作成されています。
一度この状態で実行してみましょう！

npm run dev

すると以下のようなログが表示されるので、LocalのURLにアクセスしてみてください。

> next-site@0.1.0 dev
> next dev

   ▲ Next.js 15.1.5
   - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 201ms

image.png
このような画面が表示されていれば成功です！

初期状態のNext.jsページレイアウトは将来的に変更される可能性があります。
とりあえずNext.jsのページが何らか表示されていれば成功と言えます！

ファイルの解説

一度に多くのファイルやディレクトリがインストールされますが、
それぞれに意味があるため、一つ一つ解説していきます！

public/

このディレクトリにはWebページで使用する画像を格納します！
既に多数存在する .pngや.svgファイルはNext.jsのデモサイトで使用されている画像です！

src/

ページに関連するソースコードは基本的にこのディレクトリ内に記述します！

api/

Next.jsプロジェクト内でAPIを簡単に作成でき、このディレクトリに記述することでルーティングも自動で行われます！
（今回の解説では使用しないため詳細は省略します）

_app.js

アプリ全体の共通設定やレイアウトを定義するファイルです。

_document.js

HTMLの全体構造（,

, など）のカスタマイズが可能です。

index.js

ここにメインのコードを記述します。
HTMLで言うところのindex.htmlと同じ役割を担います！

カスタマイズ

それでは新規作成したプロジェクトの中身を変更していきましょう！

初期ページソースコードのリセット

まずはNext.jsの標準サイトで使用されていて不要なものを削除します。

  • public/ ディレクトリの中身を削除
  • src/pages/api ディレクトリとその中身を削除
  • src/styles/globals.css ファイルの中身を全て削除
  • src/styles/Home.module.css ファイルの中身を全て削除
  • src/pages/index.js ファイルの中身を全て削除し、以下のコードに置き換えます。
index.js
import Head from "next/head";
import styles from "@/styles/Home.module.css";

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>
      <div>
        <h1>Hello World</h1>
      </div>
    </>
  );
}

主な開発の手順

主にsrc/pages/index.jsファイルと src/styles ファイルのコードを書き換えてページを作成していきます！

通常と異なる記述

現在index.jsには <h1>Hello World</h1>という記述がありますが、この部分を変更していきます。
変更の方法は基本的に通常のHTMLと変わりませんが、CSSの記述が以下のように変わります。

<div>
    <h1 className={styles.headline}>Hello World</h1>
</div>

まず、通常classで割り当てるクラス名はclassName属性に変わります。
次に、index.jsの2行目に以下のような記述があります。

import styles from "@/styles/Home.module.css";

こちらはCSSを「styles」という名前で読み込んでいます。
つまり、h1の記述は@/styles/Home.module.css内のheadlineというクラスを割り当てる
という意味になります。

このコードを動作させるには、 src/styles/Home.module.cssに以下の記述を追加する必要があります。

.headline {
  color: red;
}

image.png
これで赤色のHello Worldが表示されます！

画像の読み込み

先ほど public/ディレクトリに画像を格納すると説明しましたが、
imgタグで読み込む画像のパスは public/から始まるパスでは動作しません！

<img src="public/apple.png" alt="どくりんご" />

image.png
どくりんごになっちゃいました...

ではどのように読み込めば良いかというと、
単純に public/ を省略するだけで動作します！

<img src="/apple.png" alt="どくりんご" />

image.png
正常に表示されました！

imgタグに限り、public/ディレクトリのパスのpublicは省略しなければならない特殊なルールがあります。
これで画像の表示も可能になりました！

終わりに

今回は全体的にざっくりとした解説しか行っていないため、まだまだ説明しきれていない項目は多くありますが、
今回の目的はNext.jsでサイト作成の基礎を学ぶことなので、ここまでとします！

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?