🐡
Next.jsの環境を構築する(2025/01)
少し時間が取れそうなので2025年の最新環境をもとに何か作ってみようと思います。まずはNext.jsを最新の環境で整えます。公式を見ながら構築します。自分の環境は2020年版のMacBookAirです。
Nodeの最新化
Node.js18.18以上が必要だったが18.17なのでNodeを最新版に変えます。
kaikusakari@kais-MacBook-Air ~ % node -v
v18.17.1
公式によれば現時点のLTSは22.13とのこと。導入します。
kaikusakari@kais-MacBook-Air ~ % node -v
v22.13.0
最新版にできました。次はNext.jsに進みます。
Next.jsの最新化
公式のgetting startedを進めていきます。
create-next-appする
kaikusakari@kais-MacBook-Air 2025 % npx create-next-app@latest
Need to install the following packages:
create-next-app@15.1.5
動かす
kaikusakari@kais-MacBook-Air 2025 % cd my-app
kaikusakari@kais-MacBook-Air my-app % npm run dev
> my-app@0.1.0 dev
> next dev --turbopack
▲ Next.js 15.1.5 (Turbopack)
- Local: http://localhost:3000
- Network: http://192.168.11.24:3000
✓ Starting...
✓ Ready in 1007ms
動きました。
1画面作る
Next.jsはAppRouterでディレクトリがURLのパスとなっています。そのためテストとして kusakari というディレクトリを作ってみます。
page.tsx
import Image from "next/image";
export default function Home() {
return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<h1>NextTest</h1>
</div>
);
}
想定通り http://localhost:3000/kusakari というURLで画面が表示できました。
次はDB接続とサーバサイド含めてWEBAPIを作成します。
Discussion