🐡

Next.jsの環境を構築する(2025/01)

2025/01/20に公開

少し時間が取れそうなので2025年の最新環境をもとに何か作ってみようと思います。まずはNext.jsを最新の環境で整えます。公式を見ながら構築します。自分の環境は2020年版のMacBookAirです。

https://nextjs.org/docs/app/getting-started/installation

Nodeの最新化

Node.js18.18以上が必要だったが18.17なのでNodeを最新版に変えます。

kaikusakari@kais-MacBook-Air ~ % node -v
v18.17.1

公式によれば現時点のLTSは22.13とのこと。導入します。
https://nodejs.org/en

kaikusakari@kais-MacBook-Air ~ % node -v
v22.13.0

最新版にできました。次はNext.jsに進みます。

Next.jsの最新化

公式のgetting startedを進めていきます。
https://nextjs.org/docs/app/getting-started/installation

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