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

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

news 2025/10/4 23:51:04

官网 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