ウェブ開発で一番人気のNext.js
Next.jsはReactをベースにしたフレームワークです。
React単体では使うのが難しいさまざまな機能が入っています。
世界的に非常に人気のツールで、近年のウェブアプリ開発で最も使われているのがこのNext.jsです。
本記事ではそのインストール方法と公開方法を時短で紹介します。
使う言語はTypeScriptです。
Next.js（+ TypeScript）のインストール方法
ターミナル上で、Next.jsをインストールしたいフォルダに移動します。
ここでは「ダウンロード」フォルダにいるものとします。
次のコマンドをターミナルに打ち、「Enter」キーで実行してください。
npx create-next-app
ここで次のような表示が出ることがありますが、特に問題ではないので「Enter」キーを押して次に進んでください。
Need to install the following packages:
create-next-app@16.2.4
Ok to proceed? (y)
これ以降、質問がいくつか出てくるので回答していきましょう。
最初はこのアプリの名前で、これがフォルダの名前に使われます。
? What is your project named? ›
名前は好きなものが使えます。
ここでは「first-nextjs-app」と書きましょう。
? What is your project named? › first-nextjs-app
「Enter」キーを押すと次の質問が出ます。Next.jsの初期設定に関する質問です。
? Would you like to use the recommended Next.js defaults? › - Use arrow-keys. Return to submit.
Yes, use recommended defaults
No, reuse previous settings
❯ No, customize settings
Choose your own preferences
選択肢は3つあります。
【1】
TypeScriptやTailwind CSSなども一緒にインストールする（use recommended defaults）
【2】
前回の設定を再利用する（reuse previous settings）
【3】
自分で決める（customize settings）
ここではひとつひとつ自分で決めていきたいので、キーボードの矢印キーを使って3つ目の「No, customize settings」を選び、「Enter」キーで実行してください。
次の質問が出ます。Next.jsの具体的な初期設定の質問です。
? Would you like to use TypeScript? › No / Yes
? Which linter would you like to use? › - Use arrow-keys. Return to submit.
? Would you like to use React Compiler? › No / Yes
? Would you like to use Tailwind CSS? › No / Yes
? Would you like to use `src/` directory? › No / Yes
? Would you like to use App Router? (recommended) › No / Yes
? Would you like to customize the default import alias (@/*)? › No / Yes
? Would you like to include AGENTS.md to guide coding agents to write up-to-date Next.js code? › No / Yes
「Would you like to〜」とは「Do you want〜」の丁寧な聞き方です。
これらの質問は「TypeScriptやTailwind CSSなども一緒にインストールしますか？」と聞いているのだとわかります。
ここでは最小限の設定で進めたいので、各質問には次のように回答してください。
✔ Would you like to use TypeScript? → 「Yes」
✔ Which linter would you like to use? → 「None」
✔ Would you like to use React Compiler? → 「Yes」
✔ Would you like to use Tailwind CSS? → 「No」
✔ Would you like your code inside a `src/` directory? → 「No」
✔ Would you like to use App Router? (recommended) → 「Yes」
✔ Would you like to customize the import alias (`@/*` by default)? → 「No」
✔ Would you like to include AGENTS.md to guide coding agents to write up-to-date Next.js code? → 「No」
いくつかの質問について少し補足します。
この中で一番重要な質問は「App Router」に関するものです。
かならず「Yes」を選択してください。
これによって、Next.jsバージョン13以降でデフォルトになっている「Appフォルダ」が利用できます。
「TypeScript」に関する質問も必ず「Yes」を選びましょう。
「No」にするとJavaScript版がインストールされます。
React CompilerはReactのコードを最適化するツールで、Next.jsバージョン16から利用できるようになっています。
本記事でインストールしてもしなくても構いませんが、今後はReact Compilerの利用が標準になっていくと考えられるので、ここでは「Yes」を選択しています。
また、linterの質問の選択肢には「Biome」と「ESLint」が出てきます。
これらはコードの品質を高めるものです。
本記事では「None」を選択しましたが、特にBiomeは近年注目を集めているので、使い方を確認しておくことをおすすめします。
インストールが完了したら、ダウンロードフォルダを開いてください。
次のように、新しいフォルダができているのを確認できます。
これをVS Codeで開きましょう（VS Codeにフォルダを直接ドラッグ&ドロップすれば開けます）。
中身は次のようになっています。
この中には必要のないフォルダやコードがあるので、まずは整理をしていきましょう。
Next.jsのクリーンアップ
まっさらな状態で始めたいので、不要なものを削除していきます。
appフォルダの中にあるpage.module.cssを削除してください。
次はappフォルダのglobals.cssファイルを開き、中に書かれているコードをすべて消しましょう。
次にlayout.tsxを開き、中のコードをすべて消し、次のコードを書いてください。
// app/layout.tsx
import "./globals.css"
const RootLayout = ({ children }: { children: React.ReactNode }) => {
return (
<html lang="en">
<body>
{children}
</body>
</html>
)
}
export default RootLayout
次はpage.tsxを開き、ここでも同様に書かれているコードをすべて消しましょう。
そして次のコードを書いてください。
// app/page.tsx
const Home = () => {
return (
<div>
<h1>こんにちは</h1>
</div>
)
}
export default Home
VS Code上部メニューバーの「File」→「Save」、もしくは「Command」+「S」で、各ファイルに加えた変更を保存しましょう。
これでクリーンアップが完了して、Next.js開発を始める地ならしができました。
次はNext.jsを起動させましょう。
ターミナルにnpm run devを打ち、「Enter」で実行すると、次のように表示されます。
指定されているhttp://localhost:3000を開いてみましょう。
次のように表示されます。
VS Codeに戻り、page.tsx内の<h1>タグの文字列を「さようなら」に変えて保存してみましょう。
ブラウザを見ると、表示も変わっています。
つまりpage.tsxのreturn横のカッコ( )内は、HTMLと同じ要領で編集できることがわかります。
これがNext.jsの使い方の初歩の初歩です。
layout.tsxの役割
layout.tsxはNext.jsが用意している特殊なファイルです。
アプリ全体で適用したいスタイルやコンポーネントなどをここに書きます。
layout.tsxという名前のファイルに書いたコードは、次図のようにappフォルダ内に作ったすべてのpage.tsxを包み込むように機能するのです。
Next.jsの公開方法
Next.jsはVercelで公開するのが一般的です。
VercelはNext.jsの開発元が運営しているプラットフォームなので、Next.jsのさまざまな機能を制約なしに実行できるからです。
Vercelでの公開には、コードをGitで管理していることが前提なので本記事では触れませんが、「Next.js + Vercel」が一般的な運用だと知っておきましょう。
Vercel以外で公開するには、buildとexportという作業を、あらかじめ手元のコンピューター内で行う必要があります。
exportを行う下記コードをnext.config.tsに追加しましょう。
// next.config.ts
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
/* config options here */
output: "export", // 追加
};
export default nextConfig;
変更を保存しましょう。
ターミナル上で「control」を押しながら「C」を押して、Next.jsを停止させてください。
そしてbuildを行う下記コマンドを実行しましょう。
npm run build
outという新しいフォルダが生成されます。
このoutフォルダをNetlifyなどにアップロードすれば、アプリをオンラインで公開可能です。
Vercel以外のプラットフォームで公開するときには、いくつか注意点があります。詳しくはこちらの記事で紹介しています。
よくある質問（FAQ）
Q1. Next.jsとReact + Vite、選ぶ基準を教えて
現在のReact開発のツールは「Next.js」もしくは「React + Vite」の二択です。
大まかな使い分けは次のようになります。
- 社内用アプリや管理画面のダッシュボードなど → React + Vite
- SEOが重要 → Next.js
- 規模が大きく複雑な機能が必要 → Next.js
- 軽量に運用したい → React + Vite
より詳しい使い分けはこちらの記事を参考にしてください。
Q2. npm run dev以外のコマンドを教えて
Next.jsは、手元のパソコンでの開発時と、オンラインでの公開時の挙動が異なる場合があります。
開発環境と本番環境での動きに違いが生じる可能性があるのです。
そのため、本番環境の挙動もテストできるコマンドが用意されています。
先ほど紹介したビルドコマンドnpm run build完了後に、次のコマンドを実行しましょう。
npm run start
これで本番環境での動きをチェックできます。
まとめると次のようになります。
| 開発環境での挙動 | 本番環境での挙動 |
|---|---|
| npm run dev | npm run build → npm run start |
難しいと思っている人が多いNetx.jsも、本記事のように実は簡単に使えます。
最初からNext.jsの全機能をマスターする必要はないのです。
最低限の機能から使ってみて、そして必要があれば高度な機能を学んでみる。
これがもっとも失敗しない学習法です。
本記事がその助けとなれば幸いです。