路由器中Next.js中的动态内容

如何在Next.js网站中设置动态内容

在里面以前的帖子我们看到了如何将主页链接到博客页面。

博客是Next.js的绝佳用例,我们将在本章中继续通过添加博客文章

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

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

Next.js可以根据以下内容提供动态内容:动态网址

我们通过创建带有以下内容的动态页面来创建动态网址[]句法。

如何?我们添加一个pages/blog/[id].js文件。该文件将处理/blog/路线,就像我们上面提到的那样:/blog/hello-world/blog/my-second-post和更多。

在文件名中[id]方括号内表示动态的所有内容都将放入id的参数查询属性路由器

好的,一次太多了。

到底是什么路由器

路由器是Next.js提供的库。

我们从导入next/router

import { useRouter } from "next/router";

一旦我们有了useRouter,我们使用以下方法实例化路由器对象:

const router = useRouter();

一旦有了该路由器对象,就可以从中提取信息。

特别是,我们可以在[id].js通过访问文件router.query.id

因此,让我们继续将所有这些内容应用到实践中。

创建文件pages/blog/[id].js

import { useRouter } from "next/router";

export default () => { const router = useRouter();

return ( <> <h1>Blog post</h1> <p>Post id: {router.query.id}</p> </> ); };

现在,如果您去http://localhost:3000/blog/test路由器,您应该看到以下内容:

我们可以用这个id参数以从帖子列表中收集帖子。例如,从数据库中。为了简单起见,我们将添加一个posts.json项目根文件夹中的文件:

{
  "test": {
    "title": "test post",
    "content": "Hey some post content"
  },
  "second": {
    "title": "second post",
    "content": "Hey this is the second post content"
  }
}

现在我们可以导入它并从id钥匙:

import { useRouter } from "next/router";
import posts from "../../posts.json";

export default () => { const router = useRouter();

const post = posts[router.query.id];

return ( <> <h1>{post.title}</h1> <p>{post.content}</p> </> ); };

重新加载页面应向我们显示以下结果:

但这不是!相反,我们在控制台中出现错误,在浏览器中也出现错误:

为什么?因为在渲染过程中初始化组件时,数据还不存在。在下一课中,我们将了解如何使用getInitialProps将数据提供给组件。

现在,添加一点if (!post) return <p></p>返回JSX之前检查:

import { useRouter } from "next/router";
import posts from "../../posts.json";

export default () => { const router = useRouter();

const post = posts[router.query.id]; if (!post) return <p></p>;

return ( <> <h1>{post.title}</h1> <p>{post.content}</p> </> ); };

现在一切正常。最初,渲染组件时没有动态router.query.id信息。呈现后,Next.js会使用查询值触发更新,并且页面会显示正确的信息。

如果您查看源代码,那将是空的<p>HTML中的标记:

我们将尽快解决无法实施SSR的问题,这将损害我们的用户,SEO和社交共享的加载时间,正如我们已经讨论的那样。

我们可以通过列出以下文章中的帖子来完成博客示例pages/blog.js

import posts from "../posts.json";

const Blog = () => ( <div> <h1>Blog</h1>

<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">ul</span><span style="color:#f92672">&gt;</span>
  {Object.<span style="color:#a6e22e">entries</span>(<span style="color:#a6e22e">posts</span>).<span style="color:#a6e22e">map</span>((<span style="color:#a6e22e">value</span>, <span style="color:#a6e22e">index</span>) =&gt; {
    <span style="color:#66d9ef">return</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">li</span> <span style="color:#a6e22e">key</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">index</span>}<span style="color:#f92672">&gt;</span>{<span style="color:#a6e22e">value</span>[<span style="color:#ae81ff">1</span>].<span style="color:#a6e22e">title</span>}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/li&gt;;</span>
  })}
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/ul&gt;</span>

</div> );

export default Blog;

通过导入,我们可以将它们链接到各个帖子页面Linknext/link并在posts循环中使用它:

import Link from "next/link";
import posts from "../posts.json";

const Blog = () => ( <div> <h1>Blog</h1>

<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">ul</span><span style="color:#f92672">&gt;</span>
  {Object.<span style="color:#a6e22e">entries</span>(<span style="color:#a6e22e">posts</span>).<span style="color:#a6e22e">map</span>((<span style="color:#a6e22e">value</span>, <span style="color:#a6e22e">index</span>) =&gt; {
    <span style="color:#66d9ef">return</span> (
      <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">li</span> <span style="color:#a6e22e">key</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">index</span>}<span style="color:#f92672">&gt;</span>
        <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">Link</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">"/blog/[id]"</span> <span style="color:#a6e22e">as</span><span style="color:#f92672">=</span>{<span style="color:#e6db74">"/blog/"</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">value</span>[<span style="color:#ae81ff">0</span>]}<span style="color:#f92672">&gt;</span>
          <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">a</span><span style="color:#f92672">&gt;</span>{<span style="color:#a6e22e">value</span>[<span style="color:#ae81ff">1</span>].<span style="color:#a6e22e">title</span>}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/a&gt;</span>
        <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/Link&gt;</span>
      <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/li&gt;</span>
    );
  })}
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/ul&gt;</span>

</div> );

export default Blog;

免费下载我的Next.js手册


接下来的更多教程: