nextjs 第一章工程初始化

最新推荐文章于 2024-08-10 10:20:50 发布

糖糖老师436

最新推荐文章于 2024-08-10 10:20:50 发布

阅读量404

点赞数 4

分类专栏：前端程序员文章标签：前端前端框架

本文链接：https://blog.csdn.net/2402_85402030/article/details/139435695

版权

程序员同时被 2 个专栏收录

64 篇文章 0 订阅

订阅专栏

前端

63 篇文章 0 订阅

订阅专栏

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

安装 Next.js

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

perl

复制代码

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

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

项目结构

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

lua

复制代码

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：

javascript

复制代码

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

复制代码

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

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

javascript

复制代码

jsx 复制代码解释 // app/layout.js import './globals.css' export default function RootLayout({ children }) { return ( <html lang="en"> <body>{children}</body> </html> ) }

动态路由

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

javascript

复制代码

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 来预渲染页面。

javascript

复制代码

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

复制代码

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 方法分别导出了处理函数。