内容简介:学习 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 = () => { <div> <p>Hell Next.js</p> </div> } export default Index
现在, 再次访问 http://localhost:3000 , 在页面上你会看到 "Hello Next.js". 这里, 我们只是从 pages/index.js
模块导出了一个简单的 React 组件. 同理, 可以编写你自己的模块并且导出它.
确保你的 React 组件为默认导出
译注: ( default
关键字)
现在, 我们在Index页故意引入一个语法错误(删除尾部的 </p>
HTML标签), 如下:
const Index = () => ( <div> <p>Hello Next.js </div> ) export default Index
页面将会显示一个语法错误 There's an error showing the syntax error
.
错误处理
默认情况, Next.js 会在浏览器中直接显示这些错误信息, 这方便你识别错误并且快速的搞定它.
你但你解决了这些错误, 页面会执行一个无刷新的更新. 这得益于Webpack提供的热模块替换功能, 在Next.js它是默认支持的.
你太棒了
看起来你已经构建了第一个Next.js应用程序. 有什么想法? 如果你喜欢, 可以进一步深入下去.
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
算法设计与分析基础
莱维丁 (Anany Levitin) / 清华大学出版社 / 2013-5-1 / CNY 79.00
《算法设计与分析基础(第3版 影印版)》在讲述算法设计技术时采用了新的分类方法,在讨论分析方法时条分缕析,形成了连贯有序、耳目一新的风格。为便于学生掌握,本书涵盖算法入门课程的全部内容,更注重对概念(而非形式)的理解。书中通过一些流行的谜题来激发学生的兴趣,帮助他们加强和提高解决算法问题的能力。每章小结、习题提示和详细解答,形成了非常鲜明的教学特色。 《算法设计与分析基础(第3版 影印版)》......一起来看看 《算法设计与分析基础》 这本书的介绍吧!