Next.js + TypeScriptの導入・Hello Worldまで

こんにちは、okutani(@okutani_t)です。本記事では、Reactのフレームワークである「Next.js」の導入方法について解説しています。また、TypeScriptの導入も同時におこなっています。

Next.jsの概要はかんたんに以下のとおりです。

Reactを利用している
SSR（サーバーサイドレンダリング）、 SSG（スタティックサイトジェネレーション）ができる
Vercel, Incが開発をおこなっている

上記とてもざっくりと解説しているので、Next.jsで何ができるか詳しく知りたい方は別途調べてみてください。

本記事で扱うツールのバージョンはそれぞれ以下のとおりです。

React：19.1.0
Next.js：15.4.5
TypeScript: 5.8.3

Next.jsの公式サイトは以下です。

Next.js by Vercel – The React Framework

また、本記事で解説しているサンプルアプリの実装は、Next.jsの「Getting Started」ページを参考にしています。合わせてご覧ください。

Getting Started | Next.js

それでは、Next.jsの導入方法から初期設定、サンプルアプリの実装まで見ていきましょう。

Next.jsの導入方法

以下のコマンドを実行して、Next.js + TypeScriptのプロジェクトを作成します。appnameは適宜ご自身のプロジェクト名に変更してください。

$ npx create-next-app@latest appname --typescript

インタラクティブに質問されます。今回はEnter連打で対応しました。

✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes

上記はプロジェクトに合わせて適宜設定してください。

確認

以下のコマンドを実行してサーバーを起動させます。

$ cd appname

$ yarn dev
// もしくは
$ npm run dev

ブラウザで「localhost:3000」へアクセス。以下の画面が表示されればOKです。

ディレクトリ構成の確認

ディレクトリ構成は以下のようになっています。

appname/
├── .next/
├── node_modules/
├── public/
│   ├── file.svg
│   ├── globe.svg
│   ├── next.svg
│   ├── vercel.svg
│   └── window.svg
├── src/
│   └── app/
│       ├── favicon.ico
│       ├── globals.css
│       ├── layout.tsx
│       └── page.tsx
├── .gitignore
├── eslint.config.mjs
├── next-env.d.ts
├── next.config.ts
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── README.md
└── tsconfig.json

次に、TOPページの書き換えをおこなってみます。

TOPページの書き換え

TOPページを書き換えてみます。

src/app/page.tsx を以下のように書き換えました。

export default function Home() {
  return (
    <main>
      <h1 className="text-3xl font-bold p-10">Hello World!</h1>
    </main>
  )
}

ブラウザで以下のように表示されました。

不要なファイルを削除

今回は以下のように、不要な画像ファイルを削除しました。

// 画像ファイルの削除
$ rm public/file.svg public/globe.svg public/next.svg public/vercel.svg public/window.svg

また、画像ファイルは直接Finderから削除してもOKです。

publicディレクトリがGit管理から外れてしまうので、.gitkeepを作成しておきます。

$ touch public/.gitkeep

まとめ

今回はNext.js + TypeScriptの導入・Hello Worldまでを解説しました。

参考になれば幸いです。