Question

我正在尝试设置一个使用Next框架的NodeJS应用程序来利用客户端和服务器端呈现。我正在尝试让客户端和服务器端呈现为其生成的路由/ URL前置路径。服务器端渲染似乎正在起作用，它通过设置快速服务器GET函数来侦听在路由上发出的请求，然后通过剥离前置路由值将其传递给节点。然而，当它在客户端上呈现时，即使将as="{somestring}"添加到Link等元素的.js页面时也会丢失前置值，因此当在渲染中引用外部Next javascript文件时错过了前置值。

路由的目的是允许我们在一个域上运行多个微服务，每个域都托管在AWS中的不同实例上，并使用目标组和ALB进行路由。

基本上我想做的是用 / {somestring} 替换 / ，我需要将其包含在服务器端渲染中但不包括在客户端中渲染。

网址示例： www.example.com - ＆gt; www.example.com/somestring

HTML渲染： www.example.com/_next/960d7341-7e35-4ea7-baf6-c2e7d457f0db/page/_app.js - ＆gt; www.example.com/somestring/_next/960d7341-7e35-4ea7-baf6-c2e7d457f0db/page/_app.js

修改/更新

我尝试使用app.setAssetPrefix，虽然它正确呈现资产请求，但页面加载资产本身却是404.

这是我的server.js文件：

const express = require('express');
const next = require('next');

const port = process.env.PORT || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app
  .prepare()
  .then(() => {
    // Port
    const server = express();
    app.setAssetPrefix('test1');
    // ======
    // Routes
    // ======

    server.get('/test1/:id', (req, res) => {
      const actualPage = `/${req.params.id}`;
      const queryParams = { id: req.params.id };

      app.render(req, res, actualPage, queryParams);
    });

    server.get('/test1', (req, res) => {
      app.render(req, res, '/');
    });

    server.get('*', (req, res) => {
      handle(req, res);
    });

    // =============
    // End of Routes
    // =============

    server.listen(port, err => {
      if (err) throw err;
      console.log(`>Listening on PORT: ${port}`);
    });
  })
  .catch(ex => {
    console.error(ex.stack);
    process.exit(1);
  });

Answer 1

您需要自定义路由。解析传入的URL并将其替换为您想要的URL。

这是一个将/ /解析为/ b，/ b解析为/ a

的示例

https://github.com/zeit/next.js#custom-server-and-routing

NodeJS + React + Next Framework添加路径路径

1 个答案: