Nextjs 第一章工程初始化Next.js 是一个用于构建 React 应用的流行框架，具有服务器端渲染（SSR）和

Next.js 是一个用于构建 React 应用的流行框架，具有服务器端渲染（SSR）和静态生成（SSG）等功能。以下是一个详细的 Next.js 教程，帮助你入门并构建一个基本的 Next.js 应用。

安装 Next.js

首先，确保你已经安装了 Node.js 和 npm。然后，你可以使用以下命令创建一个新的 Next.js 项目：

bash
复制代码
npx create-next-app@latest my-next-app
cd my-next-app

这会创建一个新的 Next.js 应用并安装所需的依赖。

项目结构

使用 app 目录时，你的项目结构可能如下：

lua
复制代码
解释
my-next-app/
├── app/
│   ├── api/
│   │   └── hello/
│   │       └── route.js
│   ├── about/
│   │   └── page.js
│   ├── globals.css
│   └── layout.js
├── public/
│   ├── favicon.ico
│   └── vercel.svg
├── .gitignore
├── package.json
└── next.config.js

app/：存放页面和路由，每个文件夹对应一个路由。
public/：存放静态资源，如图片、字体等。

创建页面

在 app/ 目录下创建一个新的页面，例如 about/page.js：

jsx
复制代码
解释
// app/about/page.js
export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page.</p>
    </div>
  );
}

现在你可以通过访问 http://localhost:3000/about 查看新创建的页面。

全局样式

在 app/globals.css 中定义全局样式：

css
复制代码
解释
/* app/globals.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

在 app/layout.js 中引入全局样式：

jsx
复制代码
解释
// app/layout.js
import './globals.css'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

动态路由

创建一个动态路由页面，例如 [id]/page.js：

jsx
复制代码
解释
// app/posts/[id]/page.js
import { useRouter } from 'next/router'

export default function Post({ params }) {
  return (
    <div>
      <h1>Post {params.id}</h1>
      <p>This is the post content.</p>
    </div>
  )
}

获取静态内容

Next.js 提供了 getStaticProps 和 getStaticPaths 来预渲染页面。

jsx
复制代码
解释
// app/posts/[id]/page.js
import { useRouter } from 'next/router'

export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  )
}

export async function generateStaticParams() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  const posts = await res.json()

  return posts.map((post) => ({
    id: post.id.toString(),
  }))
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`)
  const post = await res.json()

  return { props: { post } }
}

在 Next.js 14 使用 app 目录的 API 路由时，你需要为每个 HTTP 方法（如 GET、POST 等）导出相应的函数。以下是如何为每个 HTTP 方法导出函数的示例：

更新 API 路由

在 app/api/hello/route.js 文件中，更新为如下内容：

javascript
复制代码
解释
// app/api/hello/route.js

export async function GET(req) {
  return new Response(JSON.stringify({ message: 'Hello, world!' }), {
    status: 200,
    headers: {
      'Content-Type': 'application/json',
    },
  });
}

export async function POST(req) {
  const data = await req.json();
  return new Response(JSON.stringify({ message: 'Data received', data }), {
    status: 200,
    headers: {
      'Content-Type': 'application/json',
    },
  });
}

// 其他方法如 PUT, DELETE 等也可以按需添加

这样，你就为 GET 和 POST 方法分别导出了处理函数。

访问 API 路由

GET 请求：访问 http://localhost:3000/api/hello 会返回 { message: 'Hello, world!' }。
POST 请求：你可以使用 curl 或其他工具向该端点发送 POST 请求。

Nextjs 第一章 工程初始化