next.js 多级路由_路由器中Next.js中的动态内容

next.js 多级路由

In the previous post we saw how to link the home to the blog page.

在上一篇文章中，我们看到了如何将主页链接到博客页面。

A blog is a great use case for Next.js, one we’ll continue to explore in this chapter by adding blog posts.

对于Next.js，博客是一个很好的用例，我们将在本章中通过添加博客文章继续进行探讨。

Blog posts have a dynamic URL. For example a post titled “Hello World” might have the URL /blog/hello-world. A post titled “My second post” might have the URL /blog/my-second-post.

博客文章具有动态URL。 例如，标题为“ Hello World”的帖子可能具有URL /blog/hello-world 。 标题为“我的第二条帖子”的帖子可能具有URL /blog/my-second-post 。

This content is dynamic, and might be taken from a database, markdown files or more.

此内容是动态的，可能取自数据库，降价文件或更多内容。

Next.js can serve dynamic content based on a dynamic URL.

Next.js可以基于动态URL提供动态内容。

We create a dynamic URL by creating a dynamic page with the [] syntax.

我们通过使用[]语法创建动态页面来创建动态URL。

How? We add a pages/blog/[id].js file. This file will handle all the dynamic URLs under the /blog/ route, like the ones we mentioned above: /blog/hello-world, /blog/my-second-post and more.

怎么样？ 我们添加一个pages/blog/[id].js文件。 该文件将处理/blog/路由下的所有动态URL，就像我们上面提到的那样： /blog/hello-world ， /blog/my-second-post等。

In the file name, [id] inside the square brackets means that anything that’s dynamic will be put inside the id paramete