20250612
我感觉我已经开始摆了。
比如说现在,我暂时没有心力去学习一些新的东西。
这种状况已经持续很久了。
可能对于我来说,又到了一个下降的情况。
可能未来的一段时间我都不会有什么产出。
也不会获得什么成就。
我打算让自己的大脑静一静。
今天确实没有动力。
希望明天会更好。
希望生活对我好点。
我感觉我已经开始摆了。
比如说现在,我暂时没有心力去学习一些新的东西。
这种状况已经持续很久了。
可能对于我来说,又到了一个下降的情况。
可能未来的一段时间我都不会有什么产出。
也不会获得什么成就。
我打算让自己的大脑静一静。
今天确实没有动力。
希望明天会更好。
希望生活对我好点。
很久不进行写作的我,渐渐失去了写作的能力。
我会回忆起高一的时候,我们语文老师让我们写周记。
我的分享欲或许就是在那个时候培养起来的。后来到了博客。
总是会在有节日的时候送上祝福,好像真的有人在关注一样。
悲观的情感总是促使写作的原因。
或许也是促使分享的原因。
我认为我在上了大学之后生活逐渐的变好了。
或许是因为有了更需要关注的事情,让我渐渐的不再有分享的心。
又或者是因为和周围人能够交流的机会变得很少了。
就算是上课,大家也基本上不会有互动。
少数的时候不得已必须要交流的时候,也会交流一二,等下了课之后就又散了。
因为这种不固定的地缘关系。
让被迫进行的交流变得少了,我可以把更多的精力放在其他的地方。
不管是什么地方,总归不再是人际交往方面。
事实上这也是我高中时候就一直在期待的。
六一儿童节快乐!!
如果希望在 Next.js 的服务端组件(Server Component)中获取当前请求的路径(pathname),但又不想使用 API 路由或客户端组件(Client Component),可以通过使用 Middleware 来实现。
可以在 Next.js 的 Middleware 中拦截请求,并将当前路径添加到请求头中,然后在服务端组件中读取该请求头,从而获取当前路径。
在项目的根目录下创建一个 middleware.ts 文件:
// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
const requestHeaders = new Headers(request.headers);
requestHeaders.set('x-current-path', request.nextUrl.pathname);
return NextResponse.next({
request: {
headers: requestHeaders,
},
});
}
export const config = {
matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};上述 Middleware 会将当前请求的路径添加到请求头中的 x-current-path 字段。(Medium)
在服务端组件中,可以使用 headers() 方法读取请求头,从而获取当前路径:(propelauth.com)
import { headers } from 'next/headers';
export default async function Getsuffix(layer : number):Promise<string>{
const headerList = await headers();
const pathname = headerList.get('x-current-path') || '/';
// 解析路径后缀
const segments = pathname.split('/');
const titleSuffix = segments[layer] || '';
return (
titleSuffix
);
} 在构建中大型的 Next.js 应用时,我们往往需要在请求进入应用之前做一些预处理,比如用户认证、国际化设置、重定向等。Next.js 从 12 版本开始支持 Middleware,它运行于边缘节点,可以在请求到达页面组件之前拦截和处理请求。
本文将逐步讲解如何在 Next.js 中实现多个中间件的逻辑,并且保持代码的清晰与模块化。
在 Next.js 中,你只需要在项目根目录创建一个名为 middleware.ts 或 middleware.js 的文件即可启用 Middleware。这个文件会自动被 Next.js 识别,不需要额外配置。
一个最基础的中间件看起来如下:
// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
return NextResponse.next();
}该中间件会对所有请求生效,并简单地允许请求继续往下走。
假设我们现在有两个独立的功能需要处理:
authMiddleware: 用于判断用户是否登录,未登录则重定向到 /logini18nMiddleware: 用于设置用户语言偏好我们希望它们都在每个请求前依次执行。如何做到这点呢?
为了保持代码整洁,我们将每个功能模块拆分到单独文件中:
middlewares/authMiddleware.tsimport { NextRequest, NextResponse } from 'next/server';
export function authMiddleware(request: NextRequest): NextResponse | void {
const isAuthenticated = true; // 示例逻辑
if (!isAuthenticated) {
return NextResponse.redirect(new URL('/login', request.url));
}
}middlewares/i18nMiddleware.tsimport { NextRequest, NextResponse } from 'next/server';
export function i18nMiddleware(request: NextRequest): NextResponse | void {
const locale = request.headers.get('accept-language')?.split(',')[0] || 'en';
request.headers.set('x-locale', locale);
}middleware.ts 中组合这些中间件// middleware.ts
import { NextRequest, NextResponse } from 'next/server';
import { authMiddleware } from './middlewares/authMiddleware';
import { i18nMiddleware } from './middlewares/i18nMiddleware';
export function middleware(request: NextRequest): NextResponse {
const authResponse = authMiddleware(request);
if (authResponse) return authResponse;
const i18nResponse = i18nMiddleware(request);
if (i18nResponse) return i18nResponse;
return NextResponse.next();
}
export const config = {
matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};我们依次执行每一个中间件函数:
NextResponse,表示它希望拦截或终止请求流程,例如重定向;undefined,表示它只是修改了请求状态或头部,不影响流程,继续执行下一个。这种模式非常直观,也方便调试和扩展。
return 会中止后续中间件?很多开发者初看可能会疑惑:
"既然我要执行多个中间件,为什么用 return 会跳过后面的逻辑?"
这是因为我们在实现“链式中间件”的处理逻辑——每个中间件有权决定是否终止请求流程。
举例来说,用户未认证时我们希望立即重定向到 /login,那么其他逻辑(比如设置语言、加载用户数据)就不需要再执行。
这种设计思路与很多后端框架如 Express.js 的中间件模型类似。
Next.js 的 Middleware 是一个强大且灵活的工具,允许你在请求生命周期的早期阶段拦截和处理逻辑。
middleware.ts 文件NextResponse 控制流程这样的设计既保持了结构的清晰,又便于日后扩展。如果你在构建应用时需要实现用户权限、国际化、AB 测试等功能,Middleware 是一个值得深入使用的机制。
希望本文对你理解和使用 Next.js Middleware 有所帮助!