Tyotto good!

Next.jsで環境構築して初期の構成を理解しよう

Posted: February 09, 2021

Next.jsとは?

Next.jsとは、Reactのフレームワークであり、SSR(Server Side Rendering)・SSG(Static Site Generation)・ISR(Incremental Static Regeneration)や、TypeScriptのサポートや、ファイルベースのルーティングなど、面倒な設定をしなくてもデフォルトでさまざまな機能を備えています。
今回はこのNext.jsの環境を構築し、そのディレクトリ構成について説明します。

環境構築

プロジェクト作成

最も簡単で公式からも推奨されている方法がcreate-next-appでアプリを作成する方法です。これにより、全ての設定が自動的にセットアップされます。
好きなディレクトリで以下のコマンドを実行してみましょう。

$ npx create-next-app

すると、

✔ What is your project named?

と聞かれるので好きなプロジェクト名を入力しましょう。
すると、必要なパッケージを自動でインポートしてくれます。
プロジェクトの生成に成功した場合、おそらく以下のように出力されます。

Success! Created <Project name> at <Project path>
Inside that directory, you can run several commands:

  yarn dev
    Starts the development server.

  yarn build
    Builds the app for production.

  yarn start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd <Project name>
  yarn dev

指示されたようにコマンドを実行してみましょう

$ cd <Project name>
$ yarn dev

すると以下のように出力されます

ready - started server on 0.0.0.0:3000, url: <http://localhost:3000>
event - compiled successfully

http://localhost:3000にアクセスしてみましょう。
以下のような画面が表示されるかと思います。



一体どのような仕組みとなっているのでしょうか。順を追って説明していきます。

プロジェクトの初期構成について

まずは作成したプロジェクトの初期構成について説明していきます。
初期のNext.jsアプリは以下のような構成となっています。

node_modules
└-- **
package.json
public
├── favicon.ico
└── vercel.svg
pages
├── _app.js
├── api
│&nbsp;&nbsp; └── hello.js
└── index.js
styles
├── Home.module.css
└── globals.css
README.md
yarn.lock

package.json

おなじみのパッケージ管理ファイルですね。以下のような記述がされているかと思います。

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },

上記はそれぞれ、

  • next dev : 開発環境でNext.jsを起動
  • next build : 本番環境で使用するアプリケーションをビルド
  • next start : 本番環境でNext.jsを起動

を意味しています。
先ほどのyarn devnext devを実行していたことがわかると思います。

pages

Next.jsはpages以下に、アプリケーションのページをファイル名に基づいてルーティングしています。
例えばpages/hoge.js というファイルがあった場合、localhost:3000/hogeにルーティングされることになります。
なので先ほどlocalhost:3000にアクセスした時pages/index.jsが読み込まれるということです。

public

画像などの静的なファイルを配置するディレクトリです。public以下に配置したファイルに対して、ルートで参照することができます。例えばpages/index.jsの7~10行目を見ると以下のように参照していることがわかります。

<Head>
	<title>Create Next App</title>
	<link rel="icon" href="/favicon.ico" />
</Head>

styles

CSSなどのスタイルシートを配置します

まとめ

  • npx create-next-app でNext.jsのアプリケーションを自動作成できる
  • yarn dev , yarn build , yarn start コマンドでアプリケーションを起動・ビルドする
  • Next.jsはpages以下のファイル名でルーティングされる