Next.js中如何向_app.js的getInitialProps传递URL参数（含slug）

要从URL路径里拿到slug参数，首先得把页面路由设置成动态路由格式，比如创建pages/[slug].js这样的文件——Next.js会自动把路径中对应位置的内容解析到ctx.query对象里。

接下来直接修改你的MyApp.getInitialProps方法，从ctx.query里取出slug即可，还能把它传给需要的接口或者返回给App组件使用：

MyApp.getInitialProps = async ({ ctx }) => {
    // 从ctx.query里解构出slug和lang参数
    const { slug, lang } = ctx.query;
    
    const { siteHeaderCollection } = await getHeaderData(lang);
    const { siteFooterCollection } = await getFooterData(lang);
    
    // 可以把slug传递给其他数据方法，或者返回给App组件
    return {
        locale: lang,
        header: siteHeaderCollection,
        footer: siteFooterCollection,
        slug // 返回slug，后续App组件就能直接用这个参数了
    };
};

补充说明 #

• 不管是客户端跳转还是服务端渲染，ctx.query都能正确拿到动态路由的参数，不用手动解析URL。
• 如果是多层动态路由（比如pages/category/[slug].js），ctx.query.slug依然能准确获取到对应路径段的值。

内容的提问来源于stack exchange，提问作者Srinu Rachakonda