首页 » 技术分享 » 官网《Next.js —— 起步》

官网《Next.js —— 起步》

　
评论关闭　652次浏览

一、开始

目前对于创建一个JavaScript单页应用是个挑战这个事实已经不再是一个秘密。幸运的是，总有一些简单易用的东西能够帮助你更快的构建应用

‘创建应用-https://github.com/facebook/create-react-app’是个非常棒的例子！

即便如此，在你创建一个一般的应用来说依旧有较高的学习曲线。

所以，我们需要一个简单且可定制的东西。

想一想，我们是如何用PHP创建一个web项目的，创建几个文件，写点PHP代码，然后简单部署一下。我们不必太过担心路由，应用会自动部署在服务端。

 

这就是NextJs要做的，我们用JavaScript和react来构建项目，而不是PHP，以下是NextJs带来的一些非常酷的特性：

  • 默认服务端渲染
  • 代码自动分割以保证更快的页面加载速度
  • 精简的客户端路由（基于页面的）
  • 支持‘热替换模块’的基于webpack的开发环境
  • 能够支持express或者其它nodejs的Http服务
  • 可定制自己的Babel或者webpack

听起来不错吧？

来，咱们牛刀小试！

 

新建

Next.js可以在类似windows、mac、Linux的系统运行，你仅需要安装Nodejs，然后就可以开始构建Next.js应用了。

除此之外，还需要一个写代码的文本编辑器以及一个终端去调用某些命令（译者注：比如windows的shell和mac的终端）

依次运行以下命令来创建一个简单的项目吧！

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

然后在 hello-next 中打开 package.json 文件，增加如下npm脚本

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

现在一切就绪，运行以下的命令来启动命令

npm run dev

然后用你最爱的浏览器打开 http://localhost:3000，你在屏幕上看到了什么？

答案是："404 - This page could not be found"，也许像这样

 

创建我们的第一个页面

现在我们创建第一个页面，在pages文件夹中创建一个名字是“pages/index.js”的文件，并添加如下内容

const Index = () => ( 
    <div> <p>Hello Next.js</p> </div> 
) 

export default Index

并现在如果再次访问 'http://localhost:3000' ，你就会看到一个写着“Hello Next.js”的页面。

这里我满导出了一个简单的React组件模块，同样地你也可以写自己的React组件并导出它。

注意：请确保你的组件导出方式是默认方式（default export）

现在尝试在index.js中抛出一个语法错误，这里有个例子（我们刻意移除了</p>标签）

const Index = () => ( 
    <div> <p>Hello Next.js </div> 
) 

export default Index

当应用再次加载 "http://localhost:3000"会发生什么？

答案是：" There's an error showing the syntax error "

 

处理错误

默认情况下，Next.js 会追踪这样的错误，并把它现在在浏览器中。这将有助于你辨别错误并迅速修复，

一旦你修复了错误，页面会立刻展现而不是整个页面全部重新加载，这得益于webpack 的热模块替换机制，而且Next.js默认也是支持的。

 

你太棒了！

你似乎已经创建了一个Next.js项目，你觉得如何？如果你喜欢，让咱们更进一步。

如果不喜欢，那么请告知我们

你可以将问题发送到gitHub repo（https://github.com/zeit/next.js），或者 slack 频道（https://zeit.co/chat）

转载自原文链接, 如需删除请联系管理员。

原文链接：官网《Next.js —— 起步》，转载请注明来源！

赞 0