Next.jsとは、Reactをベースにしたフレームワークです。
Next.jsはバックエンドも開発することができるので、「hello world!」を表示するAPIを開発してみます。
バージョン
今回開発するNext.jsとReactのバージョンこちらです！
“next”: “14.2.7”
“react”: “^18”
Next.jsプロジェクト作成コマンド
ターミナルから作成したい階層に行き、以下のコマンドを実行します。
アプリ名を「next-test」としたい場合は、「npx create-next-app next-test」ととなります。
typeScriptで作成したい場合は、「npx create-next-app next-test –typescript」ととなります。
$ npx create-next-app アプリ名
初期設定
作成コマンドを実行すると、以下のことを聞かれると思います。
全部そのままenterでOK！
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … 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
ファイル構成
ファイル構成は以下のようになっています。
srcディレクトリの中にpagesディレクトリを作成し、さらにapiディレクトリを作成してその中にhello.jsのフォルダをを作成する。
アプリ名/
├── src/
│ ├── pages/
│ │ ├── api/
│ │ │ └── << hello.js >>
│ │ └── index.js
├── public/
├── styles/
├── .gitignore
├── package.json
└── README.md
hello.jsの中身はこちら
ステータスコード200（成功）を返し、{ name: 'hello world!' } というJSONレスポンスを返します。
export default function handler(req, res) {
return res.status(200).json({ name:'hello world!' })
}
Next.jsのプロジェクトを起動
作成したNext.jsのプロジェクトを開き、開発環境で起動します。
cd アプリ名
npm run dev
ファイル構成がそのままURLになる
Next.jsの場合、ディレクトリやファイルを作成したら、そのファイル構成自体がURLになります。
以下の場合、http://localhost:3000/api/helloが「hello world!」を返すAPIになります。
アプリ名/
├── src/
│ ├── pages/
│ │ ├── api/
│ │ │ └── << hello.js >>
│ │ └── index.js
├── public/
├── styles/
├── .gitignore
├── package.json
└── README.md
ブラウザ結果
ブラウザにhttp://localhost:3000/api/helloを入力すると、「hello world!」が返ってきたのが確認できました。
コメント