nextjs getServerSideProps 中 context 获取当前的路由

在 Next.js 中,getServerSideProps 函数允许您在服务器端获取数据并将其传递给页面组件。这个函数接收一个上下文对象作为参数,这个对象包含了页面的请求信息,其中也包括当前的路由信息。

context 对象包含一个 req 属性,它是一个 HTTP 请求对象。您可以使用这个对象来获取当前的 URL 或路由信息。但是,请注意,req 对象通常是一个 Node.js 的 http.IncomingMessage 对象,它本身并不直接包含路由信息。要获取路由信息,您通常需要解析请求的 URL。

export async function getServerSideProps(context) {
	const url = context.req.url;
}

其中再进行路由跳转后,url为

url: '/_next/data/development/en/help-center.json?slug=help-center'

不符合我们的预期。

从 Next.js 10 开始,context 对象中增加了一个 resolvedUrl 属性,它提供了完整的解析后的 URL 对象,

export async function getServerSideProps(context) {
	 const { resolvedUrl } = context;
}

其中再进行路由跳转后,url为

resolvedUrl: '/help-center'

是我们想要的

### Next.js 中实现博客与深层嵌套路由 在 Next.js 的 App Router 下,创建复杂且模块化的应用程序变得更为直观。对于希望集成博客功能并利用深层次嵌套路由的应用来说,可以采用基于文件系统的路由配置方式来设计目录结构。 #### 创建基础页面布局 为了确保一致性的用户体验,在 `app` 文件夹下建立共享组件用于整个网站的基础样式和导航栏: ```jsx // app/layout.jsx export default function RootLayout({ children }) { return ( <> <header> {/* 导航条 */} </header> {children} <footer> {/* 底部版权信息 */} </footer> </> ); } ``` #### 定义静态及动态路径 针对博客部分,可以在 `app/blog/[slug]/page.jsx` 设置单篇博文显示逻辑;其中 `[slug]` 表示每篇文章唯一的标识符,允许访问者通过 URL 参数获取特定文章的内容[^1]。 ```jsx // app/blog/[slug]/page.jsx import React from 'react'; async function getPostData(slug) { // 假设这里是从数据库或其他数据源拉取对应 slug 的帖子详情 } export default async function PostPage({ params }) { const postData = await getPostData(params.slug); return ( <article> <h1>{postData.title}</h1> <div dangerouslySetInnerHTML={{ __html: postData.content }} /> </article> ); } ``` #### 构建多级子栏目 如果需要进一步细分主题分类,则可在上述基础上继续扩展层次。比如增加按年份或标签浏览的功能,只需简单地添加更多层的文件夹即可完成相应设置。例如,要按照发布日期组织文章列表,可如下操作: - `app/blog/year/[year]/index.jsx`: 展示某一年内发布的所有文章概览; - `app/blog/tag/[tag]/index.jsx`: 列举带有指定标签的文章集合。 这种做法不仅有助于SEO优化,还方便用户探索相关内容,同时也保持了清晰易懂的技术架构。 #### 动态加载资源 考虑到性能因素,当面对大量历史存档时,应该考虑延迟加载不常用的数据片段。借助于 Next.js 提供的各种钩子函数(如 `useEffect`, `getStaticProps` 或 `getServerSideProps`),可以根据实际需求灵活调整内容呈现策略。 ```javascript // 使用 getStaticPaths 和 getStaticProps 来预渲染多个可能的参数组合 export async function getStaticPaths() { // 获取所有有效的 slugs... return { paths, fallback: false, // 可选 true | blocking }; } export async function getStaticProps(context) { const { params } = context; const postContent = fetchBlogPostBySlug(params.slug); return { props: { postContent, }, } } ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值