Next Js 自定义路由和 s-s-r

Posted 2023-03-06

【中文标题】Next Js 自定义路由和 s-s-r

【英文标题】：Next Js Custom Routes and s-s-r

【发布时间】：2019-11-14 02:43:03

【问题描述】：

我正在使用 apollo 和 next，最近我注意到自定义路由会破坏 s-s-r。通常，如果您浏览页面，apollo 会缓存查询，并且当您下次访问该页面时，它会从缓存中提供所有内容。但是，对于自定义路由，从不使用缓存。

我还注意到，当我单击这些页面时，控制台中会闪烁一个错误。但它很快就消失了，我无法在这里复制它。

Server.js

// 
   server.get('/about-us', (req, res) => app.render(req, res, '/about'));


   server.get('/about', (req, res) => res.redirect(301, '/about-us'));

菜单点击处理程序

const navigate = link => () => 
        Router.push(link);
    ;

菜单项

export const menu = [
    
        name: 'Home',
        url: '/',
    ,
    
        name: 'Catalogs',
        url: '/catalogs',
    ,
    
        name: 'Shop',
        url: '/shop',
    ,
    
        name: 'Wholesale',
        url: '/wholesale',
    ,
    
        name: 'About Us',
        url: '/about-us',
        prefetch: true,
    ,
    
        name: 'Contact Us',
        url: '/contact-us',
        prefetch: true,
    ,
];

根据 nextjs 频谱的建议，我尝试在 TopNav 组件中预取自定义页面，但没有成功。

const prefetch = url => 
        if (process.browser) 
            console.log('prefetching these urls', url);
            Router.prefetch(url);
        
    ;

    useEffect(() => 
        menu.forEach(menuItem => 
            if (menuItem.prefetch) 
                prefetch(menuItem.url);
            
        );
    , []);

【问题讨论】：

运行代码时将输出重定向到文件，因此如果发生错误并被清除，您仍然可以在文件中看到它。确保同时重定向stderr 和stdout

尝试将"debbuger" [developer.mozilla.org/en-US/docs/Web/javascript/Reference/…放在你的console.log上面，它将停止执行，你将能够看到错误

不应该把server.get('/about-us', (req, res) => app.render(req, res, '/about'));改成/about-us来匹配客户端Next.js应用路由吗？

请提供一个最小的 git repo 来重现问题

谢谢大家。我能够弄清楚并保持我的观点;）

【参考方案1】：

我能够找出问题所在。这没有很好的记录，但您需要预取组件。所以对于我的情况，而不是预取/about-us，我应该预取/about。

这就是为什么在链接组件中有as 属性。 Nextjs 9 刚刚发布，解决了这个问题。

https://nextjs.org/blog/next-9#dynamic-route-segments

对于 nextjs 9，您可以将文件保存为 [pid].js，它将捕获特定路径中的所有路径。即对于/products/test-product，您必须创建文件夹产品并在其中添加[pid].js。

我需要根据 slug 查询产品，所以我添加了这个，瞧，我可以访问组件内的 slug。

Product.getInitialProps = async ( query ) => 
    return  slug: query.pid ;
;

在 next 9 之前，这些问题非常令人沮丧，但它已大大简化，它帮助我完全删除了 server.js。