TypeScript + Next.jsの環境を構築する(2023年8月)

直近でこの環境で開発をすることになったため事前学習も兼ねて環境を整備します。
開発時にはパフォーマンスも考慮してDockerは使わずNodeを動かす想定です。

環境

Nodeの最新LTSを導入する

現在の最新は18.17.1で導入しているバージョンは古い状態です。

$ node -v
v18.15.0

公式よりインストーラー経由で最新のLTSを導入します

$ node -v
v18.17.1

更新できました。

TypeScriptの更新

最新は5.1.6だが4.5.5が入っているので更新する

$ tsc -v
Version 4.5.5
$ npm i -g typescript@latest
changed 1 package in 668ms
$ tsc -v
Version 5.1.6

Next.js

改めて公式のチュートリアルをもとに最新の環境を整備する

$ mkdir nextjs
$ cd nextjs
$ npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
$ cd nextjs-blog
$ npm run dev
> dev
> next dev
- ready started server on [::]:3000, url: http://localhost:3000

想定通りチュートリアルの画面が表示できました

TypeScriptを使う

$ npx create-next-app@latest --ts

公式のTypeScriptのページにあるサンプルを試す
app/api/route.tsxを追加して静的な文字列を返す機能を作る

import { NextResponse } from 'next/server';

export function GET() {
  return NextResponse.json({ name: 'John Doe' });
}

リクエストで結果を確認する

$ curl http://localhost:3000/api
{"name":"John Doe"}

今回の目的は環境整備のため、達成できました。ネット上の記事を読みながら作業しましたが、バージョンの差分によって、現在では非推奨とされている機能を使っているものなどが散見され、公式のdocをきちんと確認するべきだと改めて感じています。

最新バージョンの環境整備ができたため、業務利用する前にコンセプトや勘所を身につけていきたい。