学习 Next.js: 入门

Miracle 发布于2019-08-20 16:54 / 2143人阅读

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

原始文档在 https://github.com/developerw... 现在搬过来.

学习 Next.js: 入门
学习 Next.js: 页面之间的导航
学习 Next.js: 使用共享组件
学习 Next.js: 创建动态内容
学习 Next.js: 使用路由掩码创建干净的URL
学习 Next.js: 干净URL的服务器支持
学习 Next.js: 获取数据
学习 Next.js: 部署

哪位分高的,帮忙创建一个 Next.js 的标签, 谢谢. 现暂时放在reactjs标签下面了. 新建文章有时间限制, 一会全部发上来, 这是最近两天翻译的 Next.js 学习资料, 原始文章在 http://learnnextjs.com

入门

创建一个单页Javascript应用程序是一件非常有挑战的事情, 幸运的是, 开源世界给我们提供了一些好用的工具来简化, 加速单页应用的开发.

Create React App 就是这样一种工具.

即使是这样, 创建单页应用有非常高的学习曲线. 仍然需要我们学习客户端路由, 页面布局, 等技术. 如果你还想要运行服务器端渲染(SSR: Server Side Rendering), 事情就变得更加困难了.

因此, 我们需要一个简单并且可自定义的方案

想一下我们如何使用PHP创建Web应用程序. 首先创建一些文件, 编写PHP代码, 然后部署. 不用担心路由的问题, Web应用程序只是在服务器端运行, 并且输出HTML而已.

但这里我们说的不是用PHP来创建Web应用程序, 我们使用Javascript和React, 使用Next.js框架给我们提供能力:

服务器端渲染(默认)

自动代码切分, 加速页面加载

简单的客户端路由(基于页面)

基于Webpack的开发环境, 支持热模块替换(HMR: Hot Module Replacement)

可以使用Express 或其他Node.js服务器实现

使用Babel和Webpack配置定制

设置

Next.js 可以在Windows, Mac和Linux运行. 只需要在系统中安装Node.js即可开始构建Next.js应用程序.

除了需要一个文本编辑器编写代码, 一个终端调用命令之外, 没什么别的是必须的.

如果在Windows上运行, 建议使用 PowerShell. Next.js可以工作在任何Shell和终端下. 但是本指南中, 我们使用UNIX相关的命令.
推荐在 Windows 下使用 PowerShell, 让工作方便一些.

运行下面的命令, 创建一个示例项目:

mkdir hello-next
cd hello-next
npm init -y
npm install --save react react-dom next
mkdir pages

然后打开package.json, 添加下面的NPM脚本命令:

{
  "scripts": {
    "dev": "next"
  }
}

现在, 一切就准备好了, 你可以运行下面的命令来启动开发服务器了.

npm run dev

在浏览其中打开: http://localhost:3000.

404 页面

打开 http://localhost:3000, 我们看到的是一个 404 页面. 这个时候 Next.js 没有任何功能. 默认就是一个 404 页面.

创建第一个页面

现在我们来创建第一个页面. 在 pages 目录下创建一个名称为 index.js 的文件, 内容如下:

const Index = () => {
  return (
    
      Hell Next.js
    
  )
}
export default Index

或者

const Index = () => (
  
    Hell Next.js
  
)

export default Index

现在, 再次访问 http://localhost:3000, 在页面上你会看到 "Hello Next.js". 这里, 我们只是从 pages/index.js 模块导出了一个简单的 React 组件. 同理, 可以编写你自己的模块并且导出它.

确保你的 React 组件为默认导出
译注: (default关键字)

现在, 我们在Index页故意引入一个语法错误(删除尾部的

HTML标签), 如下:

const Index = () => (
  
    Hello Next.js
  
)

export default Index

页面将会显示一个语法错误 There"s an error showing the syntax error.

错误处理

默认情况, Next.js 会在浏览器中直接显示这些错误信息, 这方便你识别错误并且快速的搞定它.

你但你解决了这些错误, 页面会执行一个无刷新的更新. 这得益于Webpack提供的热模块替换功能, 在Next.js它是默认支持的.

你太棒了

看起来你已经构建了第一个Next.js应用程序. 有什么想法? 如果你喜欢, 可以进一步深入下去.

Bugfix

2017-10-11: 修复如下问题

Index(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

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

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

Next.js踩坑入门系列（一）— Hello Next.js!

摘要：接下来我们运行一下。因此，我们需要新建一个目录。接下在再重新启动一下试试。因为默认开启服务端渲染，也就无需我们进行任何的配置，因此现在这个极其简单的应用就是一个。代码地址参考文章服务端渲染与打造高可靠与高性能的同构解决方案写在前面说实话，我个人还是觉得文笔越来越不错了，以前的文章都是一个问题闷到天黑，文章写的有点乱由于文章过于庞大导致不是一气呵成的，思路有时候会很混乱。所以我也准备...

rockswang 2019-08-23 11:38 评论0 收藏0
学习 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: ...

layman 2019-08-20 16:54 评论0 收藏0
学习 Next.js: 创建动态内容

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

caohaoyu 2019-08-20 16:56 评论0 收藏0
学习 Next.js: 部署

摘要：原始文档在现在搬过来学习入门学习页面之间的导航学习使用共享组件学习创建动态内容学习使用路由掩码创建干净的学习干净的服务器支持学习获取数据学习部署部署要部署一个应用程序当然我们首先需要一个可部署的已经开发完成的应用程序以下面这个开发的小型博客原始文档在 https://github.com/developerw... 现在搬过来.学习 Next.js: 入门学习 Next.js: 页面...

laznrbfe 2019-08-20 19:08 评论0 收藏0