Next.js 15 并行路由与路由拦截实践概述并行路由用于同时呈现多数据区；拦截路由用于模态/抽屉式导航。本文给出 RSC/PPR 协同与 SEO 配置示例。并行路由目录结构app/
layout.tsx
@feed/(list)/page.tsx
@sidebar/(summary)/page.tsx
@modal/(viewer)/page.tsx
// app/layout.tsx（并行插槽）
export default function RootLayout({ children, feed, sidebar, modal }: any) {
return (
<html lang="zh-CN">
<body>
<main>{children}</main>
<aside>{sidebar}</aside>
<section>{feed}</section>
<div id="modal-root">{modal}</div>
</body>
</html>
)
}
路由拦截（模态）// app/@modal/(viewer)/[id]/page.tsx
export default function Viewer({ params }: { params: { id: string } }) {
return (
<dialog open>
<img src={`/images/${params.id}.jpg`} alt="" />
<a href="/" aria-label="close">关闭</a>
</dialog>
)
}
RSC/PPR 协同与 SEO Metadata// app/@feed/(list)/page.tsx
export const dynamic = 'force-static'
export const revalidate = 600
export default async function Feed() {
const data = await fetch('https://api.example.com/feed', { cache: 'force-cache' }).then((r) => r.json())
return <ul>{data.map((x: any) => <li key={x.id}>{x.title}</li>)}</ul>
}
// app/generateMetadata.ts（或具体页面内）
import type { Metadata } from 'next'
export function generateMetadata(): Metadata {
return { title: '并行路由与拦截路由实践', description: 'Next.js 15 RSC/PPR 与 SEO 协同' }
}
技术参数与验证Node.js 20.x；浏览器：Chrome 120+PPR 命中率 > 85%；模态拦截导航耗时 < 50ms；FCP/LCP 保持稳定应用场景资讯门户：左侧摘要 + 主内容 + 模态查看控制台：主区操作 + 辅助区并行渲染注意事项并行插槽命名需与目录一致；拦截路由遵循可访问性Metadata 与站点地图需包含重要入口路径常见问题Q: 并行路由是否影响 SEO？A: 不直接影响，但需保障关键页面有可索引的 URL 与 Metadata。参考资料Next.js Parallel/Intercepting Routes 文档RSC/PPR 指南---发布信息：已发布 · 技术验证 · 阅读 36 分钟 · CC BY-SA 4.0
发表评论 取消回复