Next.js で Hello World

README.md

Next.js で Hello World

プロジェクトを作成します。

npx create-next-app@latest hello-next

使う機能の質問がされるので、次の選択肢を選びました。

✔ Would you like to use the recommended Next.js defaults? › No, customize settings
✔ Would you like to use TypeScript? … No / Yes
✔ Which linter would you like to use? › ESLint
✔ Would you like to use React Compiler? … 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 customize the import alias (`@/*` by default)? … No / Yes

React Compiler は React 19 以降で導入された公式コンパイラで、これまで人間が手で書いていた useMemo / useCallback を自動化するのが主目的です。

HTTP サーバーを起動させます。

cd hello-next
npm run dev

ブラウザーで http://localhost:3000 にアクセスする

今度はページをカスタマイズします。src/app/page.tsx を編集します。

export default function Home() {
  return <h1>Hello World</h1>;
}

ファイルを保存すれば自動的にページが更新されます。