学习 Next.js: 入门

栏目: PHP · 发布时间: 6年前

内容简介:学习 Next.js: 入门

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

入门

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

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

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

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

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

学习 Next.js: 入门

但这里我们说的不是用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 页面.

学习 Next.js: 入门

创建第一个页面

现在我们来创建第一个页面. 在 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应用程序. 有什么想法? 如果你喜欢, 可以进一步深入下去.


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Mastering Regular Expressions, Second Edition

Mastering Regular Expressions, Second Edition

Jeffrey E F Friedl / O'Reilly Media / 2002-07-15 / USD 39.95

Regular expressions are an extremely powerful tool for manipulating text and data. They have spread like wildfire in recent years, now offered as standard features in Perl, Java, VB.NET and C# (and an......一起来看看 《Mastering Regular Expressions, Second Edition》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码