Next.js 15 の環境構築手順と徹底解説

// app/users/page.tsx (SSR + RSC)
export default async function UsersPage() {
  const users = await db.user.findMany(); // サーバ上で実行
  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

// app/actions.ts
'use server';

export async function createPost(formData: FormData) {
  const title = formData.get('title');
  await db.post.create({ data: { title } });
}

// app/post/new/page.tsx
import { createPost } from '@/app/actions';

export default function NewPost() {
  return (
    <form action={createPost}>
      <input name="title" placeholder="タイトル"/>
      <button type="submit">送信</button>
    </form>
  );
}

import Image from 'next/image';

<Image
  src="/cat.jpg"
  alt="Cat"
  width={1200}
  height={630}
  priority // LCP用
  className="rounded-2xl shadow-lg"
/>

import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'], display: 'swap' });

// 60秒キャッシュ（ISR的な動作）
fetch('https://api.example.com/data', { next: { revalidate: 60 } });

npm run dev --turbo

// app/blog/[slug]/page.tsx
export const metadata = {
  title: "記事タイトル",
  description: "ここに要約文",
  openGraph: {
    title: "記事タイトル",
    description: "ここに要約文",
    type: "article",
    images: "/og.webp",
  }
}

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
source ~/.nvm/nvm.sh
nvm install 18
nvm use 18
node -v

npx create-next-app@latest my-next-blog --yes
cd my-next-blog

npm run dev --turbo