【Next.js × TypeScript】3分で使えるようになる入門ガイド（2026年版）

ウェブ開発で一番人気のNext.js

Next.jsはReactをベースにしたフレームワークです。

React単体では使うのが難しいさまざまな機能が入っています。

世界的に非常に人気のツールで、近年のウェブアプリ開発で最も使われているのがこのNext.jsです。

本記事ではそのインストール方法と公開方法を時短で紹介します。

使う言語はTypeScriptです。

本記事では解説していないNext.jsの全体像を知りたい方は、下記ガイドを参考にしてください▼

【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説

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は近年注目を集めています。下記記事で使い方を確認しておきましょう。

【Biomeの使い方】PrettierとESLintを1つにまとめたツール（ビギナー向け）

ESLintは下記記事を参考にしてください。

ESLintとは？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;