学习 Next.js: 创建动态内容

caohaoyu 发布于2019-08-20 16:56 / 2375人阅读

摘要：原始文档在现在搬过来学习入门学习页面之间的导航学习使用共享组件学习创建动态内容学习使用路由掩码创建干净的学习干净的服务器支持学习获取数据学习部署创建动态页面现在我们知道了如何使用多个页面创建一个基本的应用程序为了创建页面我们需要在磁盘上创建

</>复制代码 
原始文档在 https://github.com/developerw... 现在搬过来.
学习 Next.js: 入门
学习 Next.js: 页面之间的导航
学习 Next.js: 使用共享组件
学习 Next.js: 创建动态内容
学习 Next.js: 使用路由掩码创建干净的URL
学习 Next.js: 干净URL的服务器支持
学习 Next.js: 获取数据
学习 Next.js: 部署

创建动态页面

现在,我们知道了如何使用多个页面创建一个基本的Next.js应用程序. 为了创建页面, 我们需要在磁盘上创建实际的文件.

但是, 在真实的应用场景下,我们通常需要通过数据创建动态的页面, 用动态的方式显示页面内容. 在Next.js中有多种方式来实现这个目的.

首先, 我们使用查询串来创建一个动态的页面. 我们创建一个简单的博客应用程序. 在Index页面显示一个博客列表.

当你点击博客标题时, 可以看到博客的具体内容.

现在, 让我们开始创建这个博客程序.

设置

为了按照本课程学习, 需要有一个示例Next.js应用程序, 为此, 你可以下载下面的这个应用程序作为学习案例:

</>复制代码 
git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout using-shared-components

可以用下面的命令来运行:

</>复制代码 
npm install
npm run dev

现在, 访问 http://localhost:3000/.

添加博客列表

首先, 让我们在首页添加博客标题列表, 添加下面的代码到 pages/index.js 模块文件中.

</>复制代码 
import Layout from "../components/MyLayout.js"
import Link from "next/link"
const PostLink = (props) => (
  
    
      {props.title}
    
  
)
export default () => (
  
    My Blog
          
      
      
    
  
)

然后, 方位 http://localhost:3000, 你会看到下面的内容:

通过查询串传递数据

我们通过查询串参数传递数据, 在这个例子中为"title"查询串阐述, 表示博客的标题, 我们下面为博客的标题实现一个自定义的PostLink组件.

</>复制代码 
const PostLink = (props) => (
  
    
      {props.title}
    
  
)

创建博客页面

创建博客页面, 显示博客内容, 为此我们需要从查询串中获取标题. 下面创建一个 pages/post.js 文件, 并添加如下内容:

</>复制代码 
import Layout from "../components/MyLayout.js"
export default (props) => (
    
       {props.url.query.title}
       This is the blog post content.
    
)

现在, 页面看起来像这样:

每个页面获得一个"URL"属性, 其中包含当前URL相关的详细信息

这里我们使用"query"对象, 它包含查询串参数

然后, 我们从 props.url.query.title 获取博客的标题

现在, 我们做一点细微的修改, 替换 pages/post.js的内容为如下:

</>复制代码 
import Layout from "../components/MyLayout.js"
const Content = (props) => (
  
    {props.url.query.title}
    This is the blog post content.
  
)
export default () => (
    
       
    
)

然后访问 http://localhost:3000/post?title=Hello%20Next.js 看是什么效果?

特殊属性"url"

你看到了, 代码会抛出一个如下所示的错误页面:

这是因为, url 属性仅暴露给了页面的根主键. 并未暴露给页面中的其他组件. 但如果需要, 可以像下面这样把url属性传递给其他组件.

</>复制代码 
export default (props) => (
    
       
    
)

最后

现在我们已经学习到了如何使用查询串创建动态页面. 但这仅仅只是开始. 一个动态页面需要更多的信息来渲染, 我们不太可能通过查询串传递所有的信息. 我们想要有一个干净的像这样的URL: http://localhost:3000/blog/hello-nextjs.

接下来, 我们将会学到关于这方面的所有信息. 这是所有其他事情的基础.

GPU云服务器云服务器 next.js next.js 样式 Next.js 12 正式发布、Yarn 动态创建表格

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83273.html

学习 Next.js: 使用路由掩码创建干净的URL

摘要：原始文档在现在搬过来学习入门学习页面之间的导航学习使用共享组件学习创建动态内容学习使用路由掩码创建干净的学习干净的服务器支持学习获取数据学习部署使用路由掩码创建干净的在前面的课程中我们学到了如何使用查询串创建动态页面一次为基础我们一篇博客的原始文档在 https://github.com/developerw... 现在搬过来. 学习 Next.js: 入门学习 Next.js: ...

silenceboy 2019-08-20 16:56 评论0 收藏0
学习 Next.js: 入门

摘要：原始文档在现在搬过来学习入门学习页面之间的导航学习使用共享组件学习创建动态内容学习使用路由掩码创建干净的学习干净的服务器支持学习获取数据学习部署哪位分高的帮忙创建一个的标签谢谢现暂时放在标签下面了新建文章有时间限制一会全部发上来这是最近两天原始文档在 https://github.com/developerw... 现在搬过来. 学习 Next.js: 入门学习 Next.js: ...

Miracle 2019-08-20 16:54 评论0 收藏0
学习 Next.js: 使用共享组件

摘要：原始文档在现在搬过来学习入门学习页面之间的导航学习使用共享组件学习创建动态内容学习使用路由掩码创建干净的学习干净的服务器支持学习获取数据学习部署使用共享组件我们知道是和页面相关的通过导出一个组件创建一个页面然后把它放到目录中基于这个文件名存原始文档在 https://github.com/developerw... 现在搬过来. 学习 Next.js: 入门学习 Next.js: ...

Steve_Wang_ 2019-08-20 16:56 评论0 收藏0
学习 Next.js: 页面之间的导航

摘要：原始文档在现在搬过来学习入门学习页面之间的导航学习使用共享组件学习创建动态内容学习使用路由掩码创建干净的学习干净的服务器支持学习获取数据学习部署页面之间的导航现在我们知道了如何创建一个应用程序并且运行它我们的示例应用程序只有一个简单的页面但原始文档在 https://github.com/developerw... 现在搬过来. 学习 Next.js: 入门学习 Next.js: ...

layman 2019-08-20 16:54 评论0 收藏0
学习 Next.js: 清洁URL的服务器支持

摘要：原始文档在现在搬过来学习入门学习页面之间的导航学习使用共享组件学习创建动态内容学习使用路由掩码创建干净的学习干净的服务器支持学习获取数据学习部署干净的服务器支持在前面的课程中我们学习了如何为我们的应用程序创建干净的基本上我们让像这样但是原始文档在 https://github.com/developerw... 现在搬过来. 学习 Next.js: 入门学习 Next.js: 页面...

Lionad-Morotar 2019-08-20 16:56 评论0 收藏0