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

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

news 2026/2/10 9:51:49

官网 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）--…...

编程日记 2025/2/16 0:02:37

vue学习10

1.GPT和Copilot Copilot Tab接受删除键，不接受 ctrlenter更多方案更适合的是修改方向 const submitForm async () > {//等待校验结果await formRef.value.validate()//提交修改await userUpdateInfoService(form.value)//通知user模块，进行数据更…...

编程日记 2025/2/16 0:01:32

redis 缓存击穿问题与解决方案

前言1. 什么是缓存击穿?2. 如何解决缓存击穿?怎么做?方案1: 定时刷新方案2: 自动续期方案3: 定时续期如何选? 前言当我们使用redis做缓存的时候,查询流程一般是先查询redis,如果redis未命中,再查询MySQL,将MySQL查询的数据同步到redis(回源),最后返回数据流程图为什…...

编程日记 2025/2/15 23:58:26

【Vue3 入门到实战】16. Vue3 非兼容性改变

目录 1. 全局 API 的变化 2. 模板指令的变化 2.1 组件v-model用法 2.2 template v-for用法 2.3 v-if 和v-for 优先级变化 2.4 v-bind"object" 顺序敏感 2.5 v-on:event.native 被移除 3. 组件的变化 3.1 功能组件只能使用普通函数创建 3.2 SFC弃用功能属性…...

编程日记 2025/2/15 23:56:24

20250214 随笔 Elasticsearch（ES）索引数据 vs. 业务数据库冗余双写

Elasticsearch（ES）索引数据 vs. 业务数据库冗余双写的区别、优缺点分析在高并发数据查询场景下，Elasticsearch（ES） 和业务数据库冗余双写都是常见的数据同步方案。它们主要区别在于数据存储方式、查询性能、数据一…...

编程日记 2025/2/15 23:51:18

[DllImport("user32",EntryPoint "HideCaret")] private static extern bool HideCaret(IntPtr hWnd); //需引入命名空间using System.Runtime.InteropServices; private void Txt_RecInfo_MouseDown(object sender, MouseEventArgs e) { …...

编程日记 2025/2/15 23:49:09

中望CAD c#二次开发 ——VS环境配置

新建类库项目：下一步下一步下一步： 或直接： 改为： <Project Sdk"Microsoft.NET.Sdk"> <PropertyGroup> <TargetFramework>NET48</TargetFramework> <LangVersion>pr…...

编程日记 2025/2/15 23:48:07

anolis os 8.9安装jenkins

一、系统版本 # cat /etc/anolis-release Anolis OS release 8.9 二、安装 # dnf install -y epel-release # wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo # rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.…...

编程日记 2025/2/15 23:39:42

HtmlRAG：RAG系统中，HTML比纯文本效果更好

HtmlRAG 方法通过使用 HTML 而不是纯文本来增强 RAG 系统中的知识表示能力。通过 HTML 清洗和两步块树修剪方法，在保持关键信息的同时缩短了 HTML 文档的长度。这种方法优于现有基于纯文本的RAG的性能。方法其实主要看下围绕html提纯思路，将提纯后的…...

编程日记 2025/2/15 23:38:39

TypeScript 中的 reduce计算统计之和

1、计算字符串数组中最大的一项，比如数组：list ["家长会,柘城,喝士大夫","模压,手动阀,阿斯蒂"]，求出list中字符串长度之和最大的那项： // 初始化变量来存储字数之和最多的项及其字数之和let maxWord ;let…...

编程日记 2025/2/15 23:32:27

HTTP/2 由来及特性

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

编程日记 2025/2/15 23:30:19

android 安装第三方apk自动赋予运行时权限

摘要：行业机使用场景点击运行时权限很麻烦，而随着android的演进，对于权限的管控越发严格。故本文通过对系统的修改实现第三方app在运行时直接获取全部权限。通过属性ro.perms.force_grant控制功能开关。 Index: frameworks/base/services/…...

编程日记 2025/2/15 23:28:16

PyTorch Lightning LightningDataModule 介绍

LightningDataModule 是 PyTorch Lightning 提供的数据模块，用于统一管理数据加载流程（包括数据准备、预处理、拆分、批量加载等）。它的核心作用是将数据处理逻辑与模型解耦，提高代码的可复用性和可读性。 1. LightningDataModule 的作用 ✅ 封装数据预处理：数据下载、清…...

编程日记 2025/2/15 23:20:57

windows平台上 oracle简单操作手册

一环境描述 Oracle 11g单机环境二基本操作 2.1 数据库的启动与停止启动: C:\Users\Administrator>sqlplus / as sysdba SQL*Plus: Release 11.2.0.4.0 Production on 星期五 7月 31 12:19:51 2020 Copyright (c) 1982, 2013, Oracle. All rights reserved. 连接到:…...

编程日记 2025/2/15 23:19:54

【网络安全 | 漏洞挖掘】价值3133美元的Google IDOR

未经许可，不得转载。文章目录正文正文目标URL：REDACTED.google.com。为了深入了解其功能，我查阅了 developer.google.com 上的相关文档，并开始进行测试。在测试过程中，我发现了一个 XSS 漏洞，但它触发的域名是经过正确沙盒化的 *.googleusercontent.com，这符合 …...

编程日记 2025/2/15 23:17:50

LabVIEW太阳能制冷监控系统

在全球能源需求日益增长的背景下，太阳能作为一种无限再生能源，被广泛应用于各种能源系统中。本基于LabVIEW软件和STM32F105控制器的太阳能制冷监控系统的设计与实现，提供一个高效、经济的太阳能利用方案，以应对能源消耗的挑战。项…...

编程日记 2025/2/15 23:16:49

10.2 Git 内部原理 - Git 对象

Git 对象 Git 是一个内容寻址文件系统，听起来很酷。但这是什么意思呢？ 这意味着，Git 的核心部分是一个简单的键值对数据库（key-value data store）。你可以向 Git 仓库中插入任意类型的内容，它会返回一个唯…...

编程日记 2025/2/15 23:14:47

作业。。。。。

顺序表按元素删除参数：删除元素，顺序表 1.调用元素查找的函数 4.根据下表删除 delete_sub(list,sub); //删除元素 void delete_element(int element, Sqlist *list) …...

编程日记 2025/2/15 23:13:45

android 的抓包工具

charles 抓包工具官网地址 nullCharles Web Debugging Proxy - Official Sitehttps://www.charlesproxy.com/使用手册一定记得看官网 SSL Certificates • Charles Web Debugging Proxy http请求： 1.启动代理： 2.设置设备端口 3.手机连接当前代理 …...

编程日记 2025/2/15 23:04:31

深入剖析推理模型：从DeepSeek R1看LLM推理能力构建与优化

著名 AI 研究者和博主 Sebastian Raschka 又更新博客了。原文地址：https://sebastianraschka.com/blog/2025/understanding-reasoning-llms.html。这一次，他将立足于 DeepSeek 技术报告，介绍用于构建推理模型的四种主要方法，也就是…...

编程日记 2025/2/15 23:03:30

Python爬虫实战：研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

编程新知 2025/10/10 18:13:55

进程地址空间（比特课总结）

一、进程地址空间 1. 环境变量 1 ）⽤户级环境变量与系统级环境变量全局属性：环境变量具有全局属性，会被⼦进程继承。例如当bash启动⼦进程时，环境变量会⾃动传递给⼦进程。本地变量限制：本地变量只在当前进程(ba…...

编程新知 2025/11/15 6:48:52

el-switch文字内置

el-switch文字内置效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

编程新知 2026/1/26 10:00:16

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法：原理、应用与企业场景高危文件识别旨在检测可能导致安全威胁的文件，如包含恶意代码、敏感数据或欺诈内容的文档，在企业协同办公环境中（如Teams、Google Workspace）尤为重要。结合大模型技术&…...

编程新知 2026/2/8 10:51:42

反射获取方法和属性

Java反射获取方法在Java中，反射（Reflection）是一种强大的机制，允许程序在运行时访问和操作类的内部属性和方法。通过反射，可以动态地创建对象、调用方法、改变属性值，这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/11/9 2:57:17

【决胜公务员考试】求职OMG——见面课测验1

2025最新版！！！6.8截至答题，大家注意呀！ 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:（ B ） A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/11/8 16:25:01

基于Java+MySQL实现（GUI）客户管理系统

客户资料管理系统的设计与实现第一章需求分析 1.1 需求总体介绍本项目为了方便维护客户信息为了方便维护客户信息，对客户进行统一管理，可以把所有客户信息录入系统，进行维护和统计功能。可通过文件的方式保存相关录入数据，对…...

编程新知 2026/1/25 10:12:06

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...

编程新知 2026/1/28 4:50:33

c++第七天继承与派生2

这一篇文章主要内容是派生类构造函数与析构函数在派生类中重写基类成员以及多继承第一部分：派生类构造函数与析构函数当创建一个派生类对象时，基类成员是如何初始化的？ 1.当派生类对象创建的时候，基类成员的初始化顺序 …...

编程新知 2026/2/2 21:55:02

elementUI点击浏览table所选行数据查看文档

项目场景： table按照要求特定的数据变成按钮可以点击解决方案： <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...

编程新知 2026/2/4 18:42:53

Next.js 简介

搭建开发环境，创建项目

项目目录

页面路由

路由跳转

Link

页面布局

服务端组件 vs 客户端组件

内置方案

字体 next/font

图片 Image

样式 CSS

后端服务

获取数据（访问接口）

实战范例

src\app\page.tsx

src\app\layout.tsx

src\app\blog\page.tsx

src\app\blog\layout.tsx

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

src\app\api\blog\route.js

相关文章：