【问题标题】:NEXT.JS - Error: Export encountered errors on following paths: /blogs/:postNEXT.JS - 错误:导出在以下路径中遇到错误:/blogs/:post
【发布时间】:2021-08-07 12:41:19
【问题描述】:

我尝试next export

预呈现页面“/blogs/[post]”时发生错误。阅读更多:https://err.sh/next.js/prerender-error 错误:页面 /blogs/[post] 的错误:无法导出带有 getServerSideProps 的页面。在此处查看更多信息:https://err.sh/next.js/gssp-export 在 Object.exportPage [默认] (C:_PROJECT\bimeshow-master-27-02-1400\node_modules\next\dist\export\worker.js:15:254) 信息 - 未定义 (33/33) 错误:导出在以下路径上遇到错误: /博客/[帖子] 在 exportApp (C:_PROJECT\bimeshow-master-27-02-1400\node_modules\next\dist\export\index.js:24:1103) 在 processTicksAndRejections (internal/process/task_queues.js:93:5)

博客/[post].js:

...
export const getServerSideProps = async ({params}) => {
    const postUrl = params.post;
    const res = await axios({
        method: 'post',
        url: `/blog/single2?seo_url=${encodeURI(postUrl)}`
    });

    return { 
        props: { 
            data:res!=undefined? res.data.data : []
        }
    }
  }

routes.js:

module.exports = () => {
    return {
      '/': { page: '/' },
      '/about-us': { page: '/about-us' },
      '/404': { page: '/404' },
      '/login': { page: '/login' },
      '/blogs':{ page : '/blogs'},
      '/blogs/[post]': {page: '/blogs/[post]'},
    }

server.js

const express = require('express');
const next = require('next');
const { parse } = require('url');

const DEV = process.env.ENVIRONMENT !== 'production';
const PORT = 4567;

const app = next({dir: '.', dev: DEV});
const handle = app.getRequestHandler();

const getRoutes = require('./routes');

const routes = getRoutes();
  app.prepare().then(() => {
    const server = express();
    server.get('*', (req, res) => {
      const parsedUrl = parse(req.url, true);
      const { pathname, query } = parsedUrl;
      const route = routes[pathname];
      if (route) {
        return app.render(req, res, route.page, route.query);
      }
      return handle(req, res);
  });

  server.listen(PORT, (err) => {
    if (err) throw err;
    console.log(`> READY FOR LIFOTFF http://localhost:${PORT}`);
  });
});

【问题讨论】:

    标签: javascript node.js reactjs next.js


    【解决方案1】:

    正如错误消息中的链接信息已经指出:getServerSideProps 与下一次导出不兼容。您需要将其更改为 getStaticProps。

    https://nextjs.org/docs/messages/gssp-export

    这里是 getStaticProps 的文档:

    https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation

    【讨论】:

    • getStaticProps 用于静态页面,导出后无法显示新帖。出于这个原因,我需要动态页面。
    • 那你为什么要进行静态站点导出呢?你到底想完成什么?
    • 我通常如何获得动态输出?我需要 [post] .js 成为具有良好 SEO 的动态页面。
    • 过去我不得不这样做,最好的方法是使用服务器端渲染。您必须将网站部署为无服务器应用程序(我认为最好的选择)。要在服务器端正确引导道具,您需要像您已经在做的那样使用 getServerSideProps。我选择使用 Vercel 进行简单部署,但我也有使用 docker 执行此操作的经验。您需要在下次启动时运行应用程序
    猜你喜欢
    • 2021-04-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-12-27
    • 2021-10-30
    • 2021-01-04
    • 2014-12-09
    • 2021-11-02
    相关资源
    最近更新 更多