Next JS 极速入门

时间：2026-4-13 01:16 作者：独元殇 分类： 开发相关

一般来讲，东西运行的如何、性能等等都不是主要的。就算你一天的用户是 100W ，那每秒的并发量撑死也就 1000 ，所有的编程语言都能承受住。

单论性能，node，nextjs 的性能，无法和老后端语言比，但生态可以。next.js 的生态是非常庞大的，用 next.js 第一是为了招一个员工，干两个岗位的活儿，这种叫全栈工程师，一般都是只会 JavaScript 的，其他的都有点隔行如隔山，你很难找到一个精通 GO + 前端，或者精通 JAVA + 前端的。

第二，就是为了生态。虽然对面的 Vue 有 Nust.js，但显然 nextjs 的要庞大很多倍。这个很重要，就好像每个 next.js 的组件，评论区都人满为患一样，给人的一种可靠感。

当然，大部分使用 nextjs 的，都是写一些自己团队使用的内部小系统。毕竟不是每个程序员都懂 PHP ，使用 nextjs 目前来看，时间性价比远远甩过其他框架。

昨天我写了个 nextjs 的入门教程，是八分钟入门的：

https://www.ccgxk.com/emlog_dev/712.html

但是，我感觉让一个略懂 React 的人去熟悉 next.js，还是不够，所以今天再多来一点内容。

接着昨天的讲：

布局中的 children 参数

我们可以在我们的根目录的 layout.js 文件里，看到这样的代码：

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html
      lang="en"
      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
    >
      <body className="min-h-full flex flex-col">{children}</body>
    </html>
  );
}

第二行的 children ，这个参数。

这个参数，是延续的 React 里的概念。这表示这个「布局」是要被应用于我们项目里的所有页面的！

甭管是在【首页】，还是【关于我们】，还是【联系方式】【个人中心】，都有。

因此，我们常把类似于导航栏、侧边栏，以及最最重要的页脚 footer 给放到这个文件里。让你的 UI 文件保持一致。

而且，还有我们的字体文件，也在这个根目录的 layout.js 文件里。还有 HTML 里的 meta 元标签。

meta 标签可以这样写：

export const metadata = {
  title: "个人Next.js开发平台",
  description: "专注于Next.js与React技术的学习分享、项目实战，提供前端开发教程和实用案例。",
  keywords: ["Next.js", "React", "前端开发", "Web开发", "前端教程"],
  author: "前端开发者"
};

就是这个样子了！

不想写死怎么办？

比如某个目录，是那种动态生成的目录，里的 page.js ，比如 app-demo/app/blog/[blogid]/page.js 。我们和之前一样，也可以访问 params 这个变量。

export async function generateMetadata({ params }, parent) {
  const { id } = params;
  const item = await fetch(`/api/data/${id}`).then(res => res.json());

  return {
    title: item.name,
    description: item.desc,
  };
}

然后我们就能动态切换我们的 meta 元标签信息了！

服务器组件和客户端组件

nextjs 有两种主要类型的组件，服务器组件、客户端组件。

我们默认使用的是服务器组件，也就是服务器渲染。客户端访问我们的 url 看到的就是一大堆已经计算好、排版好的静态 HTML 代码。除了方便搜索引擎查看，而且还能显著降低 JS 包的大小。

但缺点就是动态交互不好，毕竟客户端那边没有什么 JS 了。

如果我们需要交互【比如管理状态、单击事件、动画】，我们会需要【客户端组件】。

如果我们把需要交互的 JS 内容，写到 page.js 里，会编译错误。

啊，这个问题，怎么搞呢？很简单，就在你的文件第一行，写上 "use client" 就可以了！

比如我们的某个 page.js :

"use client";
import { useState } from "react";

// 原创购物车按钮组件
export default function AddCartButton({ productId }) {
  // 状态：是否已加入购物车
  const [isAdded, setIsAdded] = useState(false);

  // 加入购物车处理函数
  const addToCart = () => {
    setIsAdded(true);
    console.log(`商品 ${productId} 已添加到购物车`);
  };

  // 按钮渲染
  return (
    <button onClick={addToCart} disabled={isAdded}>
      {isAdded ? "已加入购物车" : "加入购物车"}
    </button>
  );
}

然后，就可以单独享受 React 的交互逻辑了！

我们的项目，就能两全其美了。默认使用服务器渲染，选择性的使用客户端渲染。

可能有点奇葩，但就是，前后端放一起了，用起来还是挺舒服的。

这个是 nextjs 官方文档里，给出的组件类型支持度使用表，我机器翻译了一下：

认真参阅，明白两者的使用界限，这个很重要。

后端路由处理

next.js 开发我们的后端，也就是前后端放到一个文件夹里，非常方便。

我们可以把敏感内容的操作给放到后端。

怎么写后端呢？

在项目根目录创建一个你喜欢的文件夹，一般我们就叫 api ，然后创建一个我们需要的 api 功能的文件夹，里面放一个 route.js ，比如 app/api/getName/route.js 。（必须是 route.js）

这里面的代码，我们 node 怎么写，还怎么写。当成纯 node 服务器来写就行了，非常舒心！（唯一不一样的是，数据返回方式要写 return Response.json() ）：

// app/api/getName/route.js
export async function GET() {
  const name = "张三";
  const age = 20;

  // 只有返回方式改一点点
  return Response.json({ name, age });
}

而且前端，永远拿不到。前端向它请求时，就是，比如你是 3000 端口，就是 http://localhost:3000/api/getName , 是不是很优雅啊！

这就是用框架的爽处。

好，现在，你基本明白 nextjs 写应用，是怎么回事了，可以开始干活了。

标签: 原创 nextjs

Next JS 极速入门

布局中的 children 参数

服务器组件 和 客户端组件

后端路由处理

服务器组件和客户端组件