Question

我对React还是有些陌生，但对NextJS来说却是全新的，我正试图自学。我一直在阅读NextJS“入门”教程，以及其他一些教程。我不明白为什么需要区分客户端路由和服务器上的路由，也就是说，为什么作为示例给出的客户端路由使用查询，而服务器路由却没有。我知道我没有看到树木茂盛的森林，因此，如果有人能指出我正确的“探索” NextJS路线的方向，我将不胜感激。

在this教程中，我们可能在客户端上有

<Link href={`/blog?slug=${slug}`} as={`/blog/${slug}`} prefetch>
  ...
</Link>

（这似乎需要）设置Express服务器并处理路由

/blog/:slug

好。但为什么？为什么本地链接不简单

<Link href={`/blog/${slug}`}  prefetch>
      ...
    </Link>

？或者，或者，为什么NextJS不处理服务器端路由/blog?slug=${slug}？

我可以按照NextJS网站的“入门”教程（我自己输入代码并对其进行测试）的操作进行操作，但是就路由而言，我对什么有点迷惑我在做为什么。显然，我在这里缺少一个关键的（基本的）要素，并且希望能从我的方式中获得一些线索。

Answer 1

如果您查看路线

/blog/${slug}

在这里，段塞可以采用不同的值作为参数。如果希望NextJs处理此类路由，则需要为slug可以采用的每个值实现一个路由。例如。

/blog/slug1
/blog/slug2
/blog/slug3

这个数字可以很快增长。因此，我们使用Express服务器，以便我们可以拦截路由/blog的请求并将 slug 作为参数传递到blog页面。

Answer 2

您不需要其他客户端和服务器路由。除非您使用具有动态路由的客户端路由explained here，否则这不是强制性的。如果您不想使用它，则可以与我们的老朋友<a>切换到服务器端路由，这不需要单独的链接。

NextJS处理服务器端路由查询。下面是一个简单的示例-

server.get("/dashboard", (req, res) => {
    const actualPage = '/dashboard';
    const queryParams = {
        username: req.query.username
    };
    app.render(req, res, actualPage, queryParams);
  });

在上面的示例中，当您打开页面-/dashboard?username=amit时，可以获取页面中URL查询中传递的值，您可以使用-getInitialProps函数进行检索。要使用服务器端路由从URL查询获取数据，必须使用getInitialProps函数创建页面。示例如下-

Dashboard.getInitialProps = async(ctx)  => {

    const query = ctx.query;

    const username = query.username;

    return {"username": username};

}

以上代码将url查询中的数据作为页面道具发送。服务器将该数据返回到req中的页面。

现在，您必须使用getInitialProps函数创建_app page才能使此项工作。

NextJS路由：为什么需要不同的客户端和服务器路由？

2 个答案: