密码的，你说你不会nextjs???

你心里的于晏
3,841 阅读10分钟

我是彭于晏爱编程，我喂自己袋盐
俺从零到一看了下nextjs文档，本篇文章是俺的部分总结，有需要的，可以进行一个简单查阅，当然推荐nextjs的官网，链接为：简介 |Next.js Next.js 作为 React 生态中最具影响力的全栈框架，通过融合服务器渲染、静态生成和客户端交互能力，重新定义了现代 Web 应用的开发范式。本文将系统梳理 Next.js 从基础组件到高级架构的全维度知识体系，涵盖原文档 36 个核心要点，帮助开发者构建高性能、可扩展的现代化应用。

写在前面

为什么要学习nextjs,tell me,why?

Next.js = React + SSR + API + 路由 + SEO + 性能优化的全家桶。
📌 1. 开箱即用的全栈 React 框架
🚀 2. 更快的加载速度 + 更好的 SEO
💼 3. 企业级项目首选
🧪 4. 使用体验极好
react官方弃用Create React App,现在可选得主流就是vite+react(常用作后台管理系统)，nextjs,webh5网页，性能优秀，利于seo优化。所以个人理解，作为react开发者，不得不学。我才懒得管你这那的，学就完事了。

b9a6415b677041a481a41984f67efa15~tplv-73owjymdk6-jj-mark-v1_0_0_0_0_5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5b2t5LqO5pmP54ix57yW56iL_q75.webp

一、核心组件与渲染模型

1.1 布局系统与路由设计

Next.js 的文件系统路由机制实现了零配置路由，layout.tsx 组件支持嵌套布局组合，无需手动传递组件树：

tsx

// app/layout.tsx 根布局
import Header from './components/Header'
import Footer from './components/Footer'

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <Header />
        <main className="min-h-screen">{children}</main>
        <Footer />
      </body>
    </html>
  )
}

// 动态路由示例 app/blog/[slug]/page.tsx
export default async function BlogPost({ params }) {
  const { slug } = params
  const post = await fetchPost(slug)
  if (!post) notFound()
  return <Article content={post} />
}

尽量遵循next的文件系统约定：API Reference: File-system conventions | Next.js。

1.2 搭建脚手架新项目步骤

1.2.1 脚手架命令

npx create-next-app@latest

1.2.2 按照提示步骤构建项目

终端

What is your project named?
 my-appWould 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 your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

基本都Yes就好了

image.png

1.2.3 在app文件夹下构建属于自己项目的页面

nextjs默认支持动态路由，比如一个路由为/about的文件，你仅仅需要在app文件夹下建一个about文件夹，下面的page.tsx的内容默认就是/about路由展示的内容，然后每一个页面级文件夹下都可以定义一个当前页面的专属layout.tsx布局文件。

1.2.4 嵌套路由和动态路由

image.png 如上图所示，嵌套路由/test/test1，动态路由使用[slug]。

2. 服务器与客户端组件模型

Next.js 13+ 明确区分组件运行环境：

  • 服务器组件（默认）：仅包含 HTML 输出，无客户端 JS

  • 客户端组件：需显式声明 'use client'，支持状态与交互

tsx

// 服务器组件（数据获取在服务器完成）
export default async function ServerComponent() {
  const data = await fetch('/api/data')
  return <div>{data.title}</div>
}

// 客户端组件（包含交互逻辑）
'use client'
import { useState } from 'react'

export function ClientComponent() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(c => c + 1)}>点击 {count} 次</button>
}

二、UI 构建与样式方案

1. 图像优化与响应式设计

Next.js 内置的 Image 组件提供全链路图像优化：

tsx

import Image from 'next/image'

function ProductCard({ imageUrl, alt }) {
  return (
    <Image
      src={imageUrl}
      alt={alt}
      width={800}
      height={600}
      placeholder="blur" // 模糊占位
      quality={75}       // 图片质量
      priority           // 关键内容优先加载
      loading="eager"    // 立即加载
    />
  )
}

nextjs的 'Image'标签做了很多细节优化，内容描述较多，详情可以看文档介绍，图片推荐区分环境，本地使用本地路径，正式站使用CDN路径，对图片进行一个CDN加速，让我们的页面快速的一匹

2. CSS 方案与 Tailwind以及sass 集成

Next.js 支持多种样式方案：

  • Tailwind CSS：npx create-next-app 可自动配置，next14，15版本无需任何配置即可使用

  • CSS in JS：通过 style-components 等库实现

  • 原生 CSS：通过 import './style.css' 引入

  • 天然集成scss(sass)，安装一个包 npm install sass即可直接使用

注！😉注意样式文件名字 index.module.scss
只有带 .module.scss 后缀的文件才会被当作 CSS Module 自动导出样式对象
import styles from "./index.module.scss";

推荐大家使用Tailwind CSS尼，肯定是要拥抱的，真的很好用，新手一开始对这些样式不熟悉的可以边写页面布局边进行一个搜索样式，tailwindcss官网：tailwindcss.com/。

image.png

Tailwind CS nextjs已经帮我们完美集成了，本身不需要任何操作即可使用

export default function Test1() {
  return (
    <>
      <div className="text-center font-bold text-[green]">Test1</div>;
      <div className="text-center font-bold text-[red]">Test2</div>;
      <div className="text-center font-bold text-[blue]">Test3</div>;
    </>
  );
}

三、数据获取与状态管理

1. 服务器端数据获取

服务器组件支持直接在组件中进行数据获取：

tsx

export default async function Home() {
  // 并行获取数据
  const [posts, trends] = await Promise.all([
    fetch('/api/posts').then(res => res.json()),
    fetch('/api/trends').then(res => res.json())
  ])
  
  return (
    <div>
      <PostsList posts={posts} />
      <TrendsSection trends={trends} />
    </div>
  )
}

2. 客户端数据与副作用处理

客户端组件通过 useEffect 处理副作用：

tsx

'use client'
import { useEffect, useState } from 'react'

export function Comments({ postId }) {
  const [comments, setComments] = useState([])
  const [loading, setLoading] = useState(true)
  
  useEffect(() => {
    const fetchComments = async () => {
      setLoading(true)
      const res = await fetch(`/api/comments/${postId}`)
      setComments(await res.json())
      setLoading(false)
    }
    fetchComments()
  }, [postId])
  
  if (loading) return <div>加载评论中...</div>
  return <CommentList comments={comments} />
}

四、性能优化与代码组织

1. 延迟加载与代码拆分

使用 dynamic 实现组件的按需加载：

tsx

import dynamic from 'next/dynamic'

// 基础延迟加载
const ChartComponent = dynamic(() => import('../components/Chart'))

// 自定义加载状态
const HeavyComponent = dynamic(() => import('../components/Heavy'), {
  loading: () => <Skeleton />,
  ssr: false // 禁止服务器端渲染
})

// 条件加载示例
export default function Dashboard({ showChart }) {
  return (
    <div>
      {showChart && <ChartComponent />}
      <HeavyComponent />
    </div>
  )
}

2. 部分渲染与 Suspense

通过 Suspense 提供优雅的加载反馈：

tsx

import { Suspense } from 'react'
import Loading from './Loading'
import PostFeed from './PostFeed'
import WeatherWidget from './WeatherWidget'

export default function Home() {
  return (
    <main>
      <Suspense fallback={<Loading text="加载文章..." />}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<Loading text="加载天气..." />}>
        <WeatherWidget />
      </Suspense>
    </main>
  )
}

五、SEO 与元数据优化

1. 基础 SEO 配置

通过 next/head 管理页面元数据：

tsx

import Head from 'next/head'

export default function About() {
  return (
    <div>
      <Head>
        <title>关于我们 - Next.js 应用</title>
        <meta name="description" content="专业的 Next.js 开发案例" />
        <meta name="keywords" content="Next.js, React, 全栈开发" />
        <link rel="canonical" href="https://example.com/about" />
      </Head>
      <h1>公司简介</h1>
      {/* 页面内容 */}
    </div>
  )
}

2. JSON-LD 结构化数据

提升搜索引擎理解能力：

tsx

import Head from 'next/head'

const jsonLdData = {
  '@context': 'https://schema.org',
  '@type': 'WebPage',
  'name': 'Next.js 实战指南',
  'description': '全面解析 Next.js 开发的实用教程',
  'url': 'https://example.com/nextjs-guide',
  'author': {
    '@type': 'Person',
    'name': '开发者姓名'
  },
  'datePublished': '2025-05-26',
  'dateModified': '2025-05-26'
}

export default function GuidePage() {
  return (
    <div>
      <Head>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLdData) }}
        />
      </Head>
      <h1>Next.js 核心概念</h1>
      {/* 指南内容 */}
    </div>
  )
}

六、高级架构与企业实践

1. Multi-Zones 模块化架构

将多个独立 Next.js 应用组合为统一应用：

plaintext

项目结构:
- main-app/
  - pages/
  - next.config.js
- blog-app/
  - pages/
  - next.config.js
- server.js  // 主服务器配置

js

// main-app/next.config.js 路由重写配置
module.exports = {
  async rewrites() {
    return [
      {
        source: '/blog/:path*',
        destination: 'http://blog-app:3001/:path*' // 指向博客应用
      }
    ]
  }
}

2. 国际化与本地化

通过路由参数实现多语言切换：

tsx

// app/[lang]/layout.tsx 语言布局
import { useParams } from 'next/navigation'
import { getTranslations } from '@/utils/i18n'

export default function LanguageLayout({ children }) {
  const { lang } = useParams()
  const translations = getTranslations(lang)
  
  return (
    <html lang={lang}>
      <body>
        <Header translations={translations} />
        <main>{children}</main>
        <Footer />
      </body>
    </html>
  )
}

七、工程化与开发工具

1. 环境变量管理

使用 .env.local 管理环境配置：

bash

# .env.local 示例
NEXT_PUBLIC_API_URL=https://api.example.com
DATABASE_URL=mongodb://localhost:27017/nextapp
NODE_ENV=development

js

// next.config.js 配置公开变量
module.exports = {
  env: {
    API_URL: process.env.NEXT_PUBLIC_API_URL,
  },
}

2. 调试与性能分析

  • 浏览器调试：chrome://inspect 连接真机调试

  • 包体积分析：@next/bundle-analyzer

bash

# 安装分析工具
npm install @next/bundle-analyzer -D

# 构建时分析
ANALYZE=true npm run build

八、进阶特性与生态集成

1. PWA 支持与离线访问

通过 next-pwa 配置渐进式 Web 应用：

js

// next.config.js PWA配置
const withPWA = require('next-pwa')

module.exports = withPWA({
  pwa: {
    dest: 'public',
    register: true,
    skipWaiting: true,
    runtimeCaching: [
      {
        urlPattern: /^https?.*/,
        handler: 'NetworkFirst',
        options: {
          cacheName: 'api-cache',
          networkTimeoutSeconds: 10,
        },
      },
    ],
  },
})

2. MDX 支持与富文本

在组件中使用 MDX 混合 Markdown 与 React：

tsx

// components/Post.mdx
'use client'
import { Image } from 'next/image'

# 文章标题

这是一篇包含 React 组件的 **MDX** 内容：

<Image 
  src="/images/cover.jpg" 
  alt="封面图" 
  width={800} 
  height={400} 
/>

## 章节一
内容描述...

九、安全与认证机制

1. 会话管理与签名

使用 next-auth 实现认证系统：

js

// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
  session: {
    strategy: 'jwt',
    maxAge: 24 * 60 * 60, // 24小时
  },
  callbacks: {
    jwt: async ({ token, user }) => {
      if (user) token.userId = user.id
      return token
    },
    session: async ({ session, token }) => {
      session.userId = token.userId
      return session
    },
  },
})

2. 安全请求与防重放

请求参数添加 nonce 防止重放攻击：

tsx

// 客户端请求示例
async function submitForm(data) {
  const response = await fetch('/api/submit', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Nonce': Date.now().toString() // 添加时间戳防重放
    },
    body: JSON.stringify(data)
  })
  return response.json()
}

十、测试与持续集成

1. 单元测试方案

Next.js 支持多种测试框架：

  • Jest + React Testing Library：经典组合

  • Cypress：端到端测试

  • Playwright：跨浏览器测试

  • Vitest：高性能测试框架

js

// 测试示例 src/components/Button.test.js
import { render, fireEvent } from '@testing-library/react'
import Button from './Button'

test('按钮点击事件', () => {
  const onClick = jest.fn()
  const { getByText } = render(<Button onClick={onClick}>点击我</Button>)
  
  fireEvent.click(getByText('点击我'))
  expect(onClick).toHaveBeenCalledTimes(1)
})

2. 静态导出与预渲染

将应用导出为静态站点：

bash

# 构建并导出静态文件
next build
next export

tsx

// 动态路由预渲染示例 pages/blog/[slug].js
export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts')
  const posts = await res.json()
  
  const paths = posts.map(post => ({
    params: { slug: post.slug }
  }))
  
  return { paths, fallback: 'blocking' } // 404或动态生成
}

十一、迁移与版本管理

1. 从 Create React App 迁移

迁移关键步骤：

  1. 创建 Next.js 项目：npx create-next-app@latest
  2. 重构路由为文件系统路由
  3. 转换组件为服务器 / 客户端模式
  4. 优化图像使用 next/image
  5. 迁移状态管理逻辑
  6. 配置环境变量与构建流程

2. 版本升级策略

Next.js 升级最佳实践：

  1. 查看 变更日志 了解 breaking changes
  2. 在开发环境测试升级：npm install next@latest
  3. 使用 next-compat 工具检测兼容性问题
  4. 分阶段部署到预发 / 生产环境
  5. 监控性能与错误日志

十二、框架优化与底层能力

1. Turbopack 构建加速

Next.js 14+ 默认使用 Turbopack，比 Webpack 快 10 倍以上：

bash

# 启动开发服务器
npm run dev

2. OpenTelemetry 分布式追踪

集成 OpenTelemetry 监控应用性能：

js

// 配置示例
import { trace } from '@opentelemetry/api'
import { NextjsInstrumentation } from '@opentelemetry/instrumentation-nextjs'
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'
import { SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base'
import { CollectorTraceExporter } from '@opentelemetry/exporter-collector'

const provider = new WebTracerProvider()
provider.addSpanProcessor(new SimpleSpanProcessor(new CollectorTraceExporter({
  endpoint: 'https://otel-collector.example.com:4317'
})))
provider.register()

trace.setGlobalTracerProvider(provider)

总结：Next.js 最佳实践清单

  1. 组件设计：优先使用服务器组件，客户端组件按需声明 'use client'

  2. 数据获取：服务器组件直接异步获取数据，客户端组件使用 SWR 等库

  3. 性能优化：使用 dynamic 延迟加载非关键组件，合理配置 Suspense

  4. SEO 优化：通过 next/head 配置元数据，使用 JSON-LD 结构化数据

  5. 工程化：使用 Turbopack 加速构建，通过 @next/bundle-analyzer 优化包体积

  6. 安全实践：集成 next-auth 实现认证，请求添加 nonce 防重放

  7. 测试策略：结合 Jest + Cypress 实现单元测试与端到端测试

  8. 部署策略：利用 Multi-Zones 实现模块化部署，使用 PWA 提升用户体验

Next.js 通过持续迭代的全栈能力，为开发者提供了从前端展示到后端逻辑的完整解决方案。掌握这些核心特性与实践技巧，能够高效构建高性能、可扩展的现代 Web 应用，满足企业级项目的复杂需求。

最后

延伸扩展

国外出了一个react的新脚手架，tanstack（2023年才出的），tanstack.com/， 我看着文档介绍啥的挺不错的，感兴趣的伙伴可以了解一下，尽管nextjs已经很好用了。

特别注意的点就是需要了解它的'use client'运行环境的注意事项，凡是需要依赖浏览器，存在页面交互的情况都需要在顶部加上'use client'标识，依赖于服务器的代码封装可以使用'use server'进行标识。

npx create-next-app@latest [project-name] [options]

按照脚手架的搭建项目tailwindcss4+版本，默认不需要任何配置即可使用tailwindcss. 引入antd并使用

npm install antd --save

js

import React from 'react';
import { Button } from 'antd';

 const Home = () => (
     <div className="App"> 
        <Button type="primary">Button</Button>
     </div> );
 export default Home;

tips

批量导入（import { Icon1, Icon2 } from 'react-icons/md'） 简单易用，但会加载整个图标库，导致打包体积大 按需导入（import Icon1 from 'react-icons/md/Icon1'）： 只加载需要的图标，减少打包体积，提高性能。 同理，可推其它场景。

Next SSR

SSR服务端渲染亲密链接：juejin.cn/post/754243…

你看看有人理你吗.gif

avatar
文章
阅读
粉丝