技术篇：Next.js 路由与页面管理

✔ What is your project named? … example-route
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes

// app/not-found.js
export default function NotFound() {
  return <h1>页面未找到</h1>;
}

export default function About() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50">
      <h1 className="text-4xl font-bold mb-4">关于本博客</h1>
      <p className="text-lg mb-6 max-w-3xl text-center">
        欢迎来到我的博客！这里是一个分享编程知识、技术教程和个人见解的地方。
        我希望通过这篇博客，能与更多热爱技术的人分享我的经验和学习旅程。
      </p>
      <h2 className="text-2xl font-semibold mb-2">我的背景</h2>
      <p className="text-lg mb-4 max-w-3xl text-center">
        我是一名全栈开发者，热衷于探索新技术并分享我的学习过程。
        在这个博客中，你会找到关于前端开发、后端技术、UI设计和更多主题的文章。
      </p>
      <h2 className="text-2xl font-semibold mb-2">联系我</h2>
      <p className="text-lg mb-6 max-w-3xl text-center">
        如果你有任何问题或建议，欢迎通过社交媒体联系我。
      </p>
      <a
        href="/"
        className="px-6 py-2 text-white bg-blue-500 rounded hover:bg-blue-600 transition"
      >
        返回首页
      </a>
    </div>
  );
}

import blogPosts from "./config";

export default function BlogDetail({ params }) {
  const { id } = params;

  const blogPost = blogPosts.find((post) => post.id == id);

  return (
    <div className="max-w-2xl mx-auto p-6 bg-white shadow-md rounded-lg">
      <h1 className="text-3xl font-bold mb-2">{blogPost.title}</h1>
      <p className="text-gray-600 mb-4">
        <span>作者: {blogPost.author}</span> | <span>{blogPost.date}</span>
      </p>
      <p className="text-lg mb-4">{blogPost.summary}</p>
      <div className="prose">
        <p>{blogPost.content}</p>
      </div>
    </div>
  );
}

├── app
│   ├── dashboard
│   │   ├── analytics
│   │   │   └── page.js
│   │   ├── layout.js
│   │   └── settings
│   │       └── page.js

export default function DashboardLayout({ children }) {
  return (
    <div className="flex h-screen">
      <div className="w-1/4 bg-gray-800 text-white p-4">
        <h2 className="text-lg font-semibold">SideBar</h2>
        <ul>
          <li>
            <a
              href="/dashboard/analytics"
              className="block py-2 hover:bg-gray-700"
            >
              analytics
            </a>
          </li>
          <li>
            <a
              href="/dashboard/settings"
              className="block py-2 hover:bg-gray-700"
            >
              settings
            </a>
          </li>
        </ul>
      </div>

      <main className="flex-1">{children}</main>
    </div>
  );
}

├── app
│   ├── api
│   │   └── user
│   │       └── route.js

export async function GET(request) {
  const user = { id: 1, name: "张三" };
  return new Response(JSON.stringify(user));
}

├── app
│   ├── api
│   │   └── user
│   │       ├── [id]
│   │       │   └── route.js

export async function GET(request, { params }) {
  const userId = params.id;
  const user = { id: userId, name: `User ${userId}` };
  return new Response(JSON.stringify(user));
}

// /app/api/hello/route.js
export async function GET(request) {
  return new Response(JSON.stringify({ message: 'This is a GET request' }));
}

export async function POST(request) {
  const data = await request.json();
  return new Response(JSON.stringify({ message: 'This is a POST request', data }));
}

export default function HomePage() {
  async function fetchData() {
    const res = await fetch('/api/hello');
    const data = await res.json();
    console.log(data);
  }

  return (
    <div>
    <button onClick={fetchData}>Fetch Data</button>
    </div>
  );
}