Question

对于实现服务器端对next.js干净URL的支持，我将非常感谢。

我在后端使用了graphql-yoga（和prisma），在前端使用了带有阿波罗客户端的next.js。

我的graphql-yoga服务器正在端口4444上运行。

不确定如何使其工作以及什么是最佳方法。

我尝试使用next.js documentation for server side support for clean urls。

它使用server.get，它似乎不适用于yoga-graphql。

我还尝试过将next-routes作为一种中间件来实现，但没有设法使其均不起作用（似乎server.get从未被触发）。

我发现一些答案建议使用自定义快递服务器为next.js路由创建一个单独的文件，为graphql-yoga创建一个单独的文件。

我不确定如何同时运行server.js和index.js，以及是否建议这样做。

在我的后端/src/index.js中：


require("dotenv").config({ path: ".env" });

const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

const createServer = require("./createServer");

const server = createServer();

app
  .prepare()
  .then(() => {

   server.express.get('/item/:id', (req, res) => {
      const actualPage = '/item'
      const queryParams = { id: req.params.id }
      app.render(req, res, actualPage, queryParams)
    })

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

server.start(
  {
    cors: {
      credentials: true,
      origin: [process.env.FRONTEND_URL, process.env.BACKEND_URL, process.env.PLAYGROUND_URL]
    }
  },
  deets => {
    console.log(`Server is now running on port http://localhost:${deets.port}`);
  }
);

})
  .catch(ex => {
    console.error(ex.stack)
    process.exit(1)
  })

我希望这段代码可以为以下路径提供干净的网址：

localhost / item？id = 1（初始路径）

localhost / item / 1（纯净网址）

但是，当我从前端导航到localhost / item / 1时，出现404错误（应用程序的其余部分按预期运行），并且当我启动graphql服务器时，它将继续登录控制台：“客户端ping，但没有页面条目：/ _ error”。

localhost / 4444也给出了404错误，而不是显示graphql游乐场。

使用graphql-yoga使用Next.js清理URL

0 个答案: