当前位置：首页 > article >正文

Next.js 15【实用教程】2025最新版

article 2026/4/23 20:20:45

官网 https://nextjs.org/docs/app/getting-started

Next.js 简介

Next.js 由 Vercel 开发和维护，旨在解决单页应用（SPA）和多页应用（MPA）在性能和 SEO 上的不足。

核心特性

服务端渲染（SSR）-- 在服务器端预渲染页面，将 HTML 直接发送到客户端，从而提高了页面加载速度和 SEO 效果。
静态生成（SSG）-- 在构建时生成 HTML 的方式，使得每个页面的内容都能在构建时生成并缓存，这样无需在每次请求时生成 HTML，从而显著提升页面性能。
通过文件系统的结构快速创建页面路由。同时，API 路由功能使开发者能够直接在 Next.js 项目中创建后端 API
增量静态再生成（ISR）-- 将部分页面静态化，并在内容更新时触发重新生成，以确保页面内容的新鲜度和快速访问。
内置图像优化功能，可通过 <Image /> 组件自动进行图像懒加载、响应式优化和格式转换，有效减少加载时间并提升页面性能。
对 CSS 模块、Sass 和 styled-jsx 原生支持，支持 Tailwind CSS 和其他流行的 CSS 框架

适用场景

内容驱动的网站：如博客、新闻网站等，Next.js 的 SSG 和 ISR 特性使其在内容频繁更新时，能够保持高效的性能和良好的 SEO 表现。
电商平台：对于电商网站，Next.js 的 SSR 和 ISR 能够确保页面快速响应，满足用户体验的需求，同时也便于动态加载产品信息。
Web应用：复杂的企业级应用或 SaaS 应用可以利用 Next.js 提供的 SSR、动态路由和 API 路由实现高性能的全栈架构。
个人网站和组合展示：对于个人博客和作品展示，Next.js 提供了静态生成和图像优化功能，能够确保简洁高效的页面展示。

搭建开发环境，创建项目

安装 Node.js
创建项目

npx create-next-app@latest

在这里插入图片描述

会自动安装依赖

用 vscode 打开项目，并启动

浏览器访问 http://localhost:3000/ 效果如下

在这里插入图片描述

项目目录

src\app\page.tsx 项目首页
src\app\layout.tsx 页面布局
public 静态资源，例如图像、字体等

页面路由

会根据 src\app 内的文件自动创建，具体对应关系范例如下：

路由	文件路径
/	src\app\page.tsx
/blog	src\app\blog\page.tsx
/blog/动态参数	`src\app\blog\[slug]\page.tsx`

所有页面路由都对应一个 page.tsx
含动态参数的路由，对应 [slug] 文件夹下的 page.tsx

app/
├── layout.jsx      // 布局组件
├── page.jsx        // 首页，映射到 "/"
├── about/
│   └── page.jsx    // 关于页面，映射到 "/about"
├── blog/
│   ├── layout.jsx  // 博客专属布局
│   └── [slug]/
│       └── page.jsx  // 动态路由，映射到 "/blog/:slug"
├── api/hello/
│   └── route.jsx   // API 路由，映射到 "/api/hello"
└── globals.css    // 全局样式

页面中获取路由动态参数的方法如下

export default async function Page({params,
}: {params: Promise<{ slug: string }>;
}) {const { slug } = await params;return (<><h1>第 {slug} 篇博客的标题</h1><p>第 {slug} 篇博客的内容</p></>);
}

页面函数组件的参数为 { params,}
函数参数的类型为 { params: Promise<{ slug: string }>;}，可见参数 params 是一个 Promise
需用 await 同步获取到 params ，并解构出其中的 slug
解构出的 slug 值即路由上的动态参数，以 /blog/1 为例，slug 的值为 1

路由跳转

Link

内置的 Link 组件，点击可实现路由跳转

import Link from "next/link";

 <Link href="/blog">板块--博客</Link>

页面布局

每个文件夹下的 layout.tsx 文件，即该文件夹对应路由的页面布局

布局	布局文件路径
全局布局	src\app\layout.tsx
/blog 的布局	src\app\blog\layout.tsx

以 blog 板块的布局为例，src\app\blog\layout.tsx 的内容为

export default function BlogLayout({children,
}: {children: React.ReactNode;
}) {return (<><header>页头-博客板块</header><section>{children}</section></>);
}

BlogLayout 为任意自定义的布局函数名称
函数的参数为 {children:children} , 简写为 {children}
函数参数的类型为 {children:React.ReactNode}
函数的返回内容需含有 {children} ，其他内容可任意自定义

服务端组件 vs 客户端组件

https://blog.csdn.net/weixin_41192489/article/details/145629124

内置方案

字体 next/font

https://blog.csdn.net/weixin_41192489/article/details/145625560

图片 Image

https://blog.csdn.net/weixin_41192489/article/details/145629598

样式 CSS

https://blog.csdn.net/weixin_41192489/article/details/145625489

后端服务

Next.js 不仅能构建前端页面，还同时提供了后端服务

src\app\api 内的 route.js 会自动生成后端接口

范例：src\app\api\blog\route.js

import { NextResponse } from "next/server";// 处理 GET 请求
export async function GET(request) {// 这里可以编写从数据库或其他数据源获取用户数据的逻辑const data = [{id: 1,title: "第1篇博客的标题",content: "第1篇博客的内容",},{id: 2,title: "第2篇博客的标题",content: "第2篇博客的内容",},];return NextResponse.json(data);
}

启动项目后，浏览器访问 http://localhost:3000/api/blog ，效果如下：

在这里插入图片描述

获取数据（访问接口）

https://blog.csdn.net/weixin_41192489/article/details/145632442

实战范例

在这里插入图片描述

src\app\page.tsx

import Link from "next/link";export default function Page() {return (<><h1>首页</h1><div><Link href="/blog">板块--博客</Link></div><div><Link href="/note">板块--笔记</Link></div></>);
}

src\app\layout.tsx

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";const geistSans = Geist({variable: "--font-geist-sans",subsets: ["latin"],
});const geistMono = Geist_Mono({variable: "--font-geist-mono",subsets: ["latin"],
});export const metadata: Metadata = {title: "Create Next App",description: "Generated by create next app",
};export default function RootLayout({children,
}: Readonly<{children: React.ReactNode;
}>) {return (<html lang="en"><bodyclassName={`${geistSans.variable} ${geistMono.variable} antialiased`}><header>页头--全局</header>{children}</body></html>);
}

src\app\blog\page.tsx

在这里插入图片描述

import Link from "next/link";interface blog {id: number;title: string;content: string;
}
export default async function Page() {const data = await fetch("http://localhost:3000/api/blog");const blogList = await data.json();return (<><h1>博客列表</h1><ul>{blogList.map((blog: blog) => (<li key={blog.id}><Link href={`/blog/${blog.id}`}>{blog.title}</Link></li>))}</ul></>);
}

src\app\blog\layout.tsx

export default function BlogLayout({children,
}: {children: React.ReactNode;
}) {return (<><header>页头-博客板块</header><section>{children}</section></>);
}

src\app\blog[slug]\page.tsx

在这里插入图片描述

export default async function Page({params,
}: {params: Promise<{ slug: string }>;
}) {const { slug } = await params;return (<><h1>第 {slug} 篇博客的标题</h1><p>第 {slug} 篇博客的内容</p></>);
}

src\app\api\blog\route.js

import { NextResponse } from "next/server";// 处理 GET 请求
export async function GET(request) {// 这里可以编写从数据库或其他数据源获取用户数据的逻辑const data = [{id: 1,title: "第1篇博客的标题",content: "第1篇博客的内容",},{id: 2,title: "第2篇博客的标题",content: "第2篇博客的内容",},];return NextResponse.json(data);
}

Next.js 15【实用教程】2025最新版

官网 https://nextjs.org/docs/app/getting-started Next.js 简介 Next.js 由 Vercel 开发和维护，旨在解决单页应用（SPA）和多页应用（MPA）在性能和 SEO 上的不足。核心特性服务端渲染（SSR）--…...

编程日记 2026/4/18 10:26:55

2025-02-13 学习记录--C/C++-PTA 7-17 爬动的蠕虫

一、题目描述 ⭐️ 二、代码（C语言）⭐️ #include <stdio.h>int main() {int N, U, D; // N: 井的总高度，U: 每分钟向上爬的高度，D: 每分钟滑下的高度int height 0; // 蠕虫当前的高度int minute 0; // 蠕虫爬行的时间sc…...

编程日记 2026/4/10 9:41:11

Elasticsearch+Logstash+Kibana可视化集群部署

文章目录 1.组件介绍简述2.集群规划3.Es组件部署4.Logstash组件部署5.Kibana组件部署6.Kibana的基础使用 1.组件介绍简述 Elasticsearch：开源实时分布式搜索和分析引擎，支持大规模数据存储和高吞吐量，提供丰富的搜索功能和可扩展性。 Logsta…...

编程日记 2026/4/10 11:00:47

React VS Vue

React 和 Vue 是目前最流行的两个前端框架，它们在设计理念、生态系统和开发体验上各有特点。以下是对 React 和 Vue 的全方位对比： 1. 核心设计理念 React 库而非框架：React 是一个用于构建 UI 的库，专注于视图层，其…...

编程日记 2026/4/21 3:30:29

DeepSeek+Excel 效率翻倍

2025年初，DeepSeek以惊人的效率突破技术壁垒，用极低的成本实现了与行业顶尖AI相媲美的性能，瞬间成为全球科技领域的热门话题。那么AI工具的普及将如何改变我们的工作方式？Excel会被取代吗？ 今天，珠珠带你…...

编程日记 2026/4/8 19:52:45

将Sqlite3数据库挂在内存上处理

创作灵感：最近把小学生的口算题从2位数改到3位数，100以内四则运算练习（千纬数学）再次更新，选取难题-CSDN博客要不断刷题目，以前100以内的加减乘除也是这样刷出来的，代码如下： impor…...

编程日记 2026/4/10 7:43:57

Vue3.5 企业级管理系统实战（六）：Vue3中defineProps用法

上一节封装图标组件 SvgIcon 时，用到了 defineProps，因为它在开发中的重要性，这里简单看一下它的用法，已熟知用法的此节可跳过。在 Vue3 的组件化开发体系里，组件间通信是构建高效、可维护应用程序的核心环节。defin…...

编程日记 2025/11/10 7:26:47

HTTP/2 由来及特性

HTTP/2 的由来 HTTP/1.x 的局限性性能瓶颈队头阻塞问题：在HTTP/1.x中，一个TCP连接在同一时间只能处理一个请求，后续请求必须等待前面的请求处理完成并收到响应后才能被处理。例如，当一个页面有多个资源（如图片、脚…...

编程日记 2026/3/2 21:11:33

electron.vite 项目创建以及better-sqlite3数据库使用

1.安装electron.vite npm create quick-start/electronlatest中文官网：https://cn.electron-vite.org/ 2. 安装项目依赖 npm i3.修改 electron-builder 配置文件 appId: com.electron.app productName: text33 directories:buildResources: build files:- !**/.v…...

编程日记 2026/4/18 16:13:47

蓝桥杯 Java B 组之枚举算法（暴力破解）

Day 3：枚举算法（暴力破解） 枚举算法（Brute Force）是一种暴力搜索方法，它通过遍历所有可能的情况来找到正确答案。虽然它的时间复杂度较高，但在数据范围较小时，它是一种简单且…...

编程日记 2026/4/21 20:31:23

AI 控制web浏览器基础知识准备，名词解释Xvfb，x11vnc，novnc，playwright，gradio

在探索如何让AI控制Web浏览器实现自动化任务时，了解底层技术栈是关键。本文将解析五个核心组件：Xvfb、x11vnc、novnc、playwright和gradio，这些工具共同构成了AI驱动浏览器的基础架构。 1. Xvfb（X Virtual Framebuffer&#xff0…...

编程日记 2026/1/31 4:51:53

C++，STL容器适配器，stack：栈深入解析

文章目录一、容器概览与核心特性核心特性速览二、底层实现原理1. 容器适配器设计2. 默认容器对比三、核心操作详解1. 容器初始化2. 元素操作接口3. 自定义栈实现四、实战应用场景1. 括号匹配校验2. 浏览器历史记录管理五、性能优化策略1. 底层容器选择基准2. 内存预分配技巧六…...

编程日记 2026/4/23 10:22:50

Vue笔记（十）

一、AI的基本认知二、ChatGPT的基本使用三、AI插件--Copilot入门 1.Copilot是由OpenAI和GitHub合作开发的AI编程辅助插件，基于大量代码训练，能根据上下文自动生成代码建议。 2.安装与配置：在常用代码编辑器（如Visual Studio Cod…...

编程日记 2026/4/22 4:44:06

Ubuntu下载安装Docker-Desktop

下载 Ubuntu | Docker Docs 预备工作 Ubuntu增加docker apt库-CSDN博客安装 sudo apt-get updatesudo apt install gnome-terminal# sudo apt install -y docker-composesudo apt-get install ./docker-desktop-amd64.deb 测试 sudo docker run hello-worldHello from D…...

编程日记 2026/4/20 5:06:23

DeepSeek 突然来袭，AI 大模型变革的危机与转机藏在哪？

随着人工智能技术的飞速发展，大模型领域不断涌现出具有创新性的成果。DeepSeek 的横空出世，为 AI 大模型领域带来了新的变革浪潮。本文将深入探讨 DeepSeek 出现后 AI 大模型面临的危机与转机。冲冲冲！！！ 目录一、…...

编程日记 2026/4/23 13:58:40

C#运动控制——轴IO映射

1、IO映射的作用该功能允许用户对专用 IO 信号的硬件输入接口进行任意配置，比如轴的急停信号，通过映射以后，可以将所有轴的急停信号映射到某一个IO输入口上，这样，我们只要让一个IO信号有效就可以触发所有轴的急停。进…...

编程日记 2026/4/20 5:05:15

ArrayList、LinkedList、HashMap、HashTable、HashSet、TreeSet

集合族谱在这些集合中，仅有vector和hashtable是线程安全的，其内部方法基本都有synchronized修饰。 ArrayList 底层采用Object数组实现，实现了RandomAccess接口因此支持随机访问。插入删除操作效率慢。 ArrayList需要一份连续的内存空间。 A…...

编程日记 2026/4/23 11:55:23

DeepSeek 指导手册（入门到精通）

第⼀章：准备篇（三分钟上手）1.1 三分钟创建你的 AI 伙伴1.2 认识你的 AI 控制台第二章：基础对话篇（像交朋友⼀样学交流）2.1 有效提问的五个黄金法则2.2 新手必学魔法指令第三章：效率飞跃篇&…...

编程日记 2026/4/19 8:37:22

window 11 鼠标右键切换回经典模式

window 11 鼠标右键切换回经典模式在换新电脑，更新到 window 11 后，鼠标右键很不习惯，把很多功能都隐藏到最后一个打开更多模块了，删除以及刷新等操作也不能使用右键字母快捷操作。恢复window 11 右键菜单到经典模式方法一&am…...

编程日记 2026/3/7 18:20:27

RabbitMQ 延迟队列

1.延迟队列插件安装(版本号要对其） Releases rabbitmq/rabbitmq-delayed-message-exchange GitHub 下载的文件: rabbitmq_delayed_message_exchange-3.13.0.ez 直接复制到以下文件夹： \RabbitMQ Server\rabbitmq_server-3.13.7\plugins\ 执行命令…...

编程日记 2025/12/1 0:20:31