【Next.js + TypeScript】3分で使えるようになる入門ガイド（2026年版）
2026.4.24
この記事は約3分で読めます
フロントエンドのデファクト開発ツール『Next.js + TypeScript』。
インストールから公開方法までの全体像を、時短で紹介します。
目次
筆者：三好アキ（専門用語なしでプログラミング）
▶︎ 三好アキの著書一覧はこちら
ウェブ開発で一番人気のNext.js
Next.jsはReactをベースにしたフレームワークです。
React単体では使えないさまざまな機能が入っています。
世界的に非常に人気のツールで、近年のウェブアプリ開発で最も使われているのがNext.jsです。
本記事ではこの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やReact開発ではAI利用が一般的です。
AI駆動開発に役立つプロンプト集を無料で配布しているので、ぜひご利用ください。
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 HomeVS 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 buildoutという新しいフォルダが生成されます。
この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 |
Q3. フロントエンドの学習はどのように進めていけばいいですか？
フロントエンド開発者として就職をしたり、フリーランス案件を獲得するには、本記事で紹介したことだけでは不十分です。
より深いTypeScriptやReactの知識やスキルも必須になります。
これまでの私の指導経験をもとに、もっとも効果的に学習を進めていくステップをまとめたロードマップを無料でお配りしています。
下記ページよりご利用ください▼
✤ 筆者 ✤
三好アキ（専門用語なしでプログラミング）
非IT出身。かつてプログラミングの専門用語の壁に何度もぶつかり、挫折した経験から、「専門用語なし」のメソッドを確立。1,200人以上のビギナーのフロントエンド開発入門を成功させる。翔泳社『動かして学ぶ！Next.js/React開発入門』（韓国でも出版）など著書30冊以上。Amazonベストセラー1位複数回獲得。
法人・チーム向けのReact研修講座も行っています ▶︎ 詳しくはこちら