React.js 是现今前端最火的应用框架之一，而 **Next.js 正是 React.js 领域最优秀的服务端渲染框架之一。**基本上，现在所有的前端主流形式，从服务端渲染 APP，静态站到桌面应用等，Next.js 都能胜任。

不论是国内还是国外，都有不少开发者和企业在使用 Next.js 开发网站，比如：

腾讯新闻移动端门口站腾讯网
大名顶顶的Hulu 视频站
世界最受欢迎的 React UI 组件库Material-UI
魅族官网首页魅族

今天带来一门完整的 Next.js 框架实战课程，作者 luffyZh 老师是网易的高级前端开发工程师，手把手带你逐步掌握 Next.js 框架，最终完成静态博客+全栈动态博客系统的搭建。

最终项目效果：

个人静态博客系统

全栈动态博客系统

如果你是 React.js 开发者并且想学习一个服务端渲染框架，那么本课程是你很好的选择。

课程分为三个阶段：

一：了解服务端渲染并且初步认识 Next.js，学习使用 Next.js 的各种 API 以及内置约束规则，进行简单的页面开发；

二：学习用多种方式部署 Next.js 应用，满足小型个人和大型企业的各种业务场景；

三：从实践角度出发使用 Next.js 开发两个应用系统，第一个是静态个人博客系统，第二个是全栈开发包含前后端以及数据库的动态博客系统。

课程地址：Next.js 轻量级 React 框架实战

欢迎打开浏览器进入学习环境，边敲代码边练习～下面是课程内容：

什么是 Next.js

熟悉一门新的技术，最简单的途径就是去它的官网阅读文档，官网地址：Next.js。

Next.js 官方对于自身的介绍可以说是毫不谦虚：

The React Framework for Server-Render APP, Static Websites, SEO-Friendly Sites, the DeskTop, Electron, the PWA…

基本上现今前端主流形式，从服务端渲染 APP，静态站到桌面应用等，Next.js 都能胜任。

Next.js 案例

尽管 Next.js 官网说的天花乱坠，那么实际上呢？有很多开发者在用 Next.js 做项目进行网站开发吗？来看看有哪些著名的网站使用 Next.js 来进行开发的。

大名顶顶的Hulu 视频站
世界最受欢迎的 React UI 组件库Material-UI
腾讯新闻移动端门口站腾讯网
魅族官网首页魅族

魅族官网只有首页采用了 Next.js，其他页面都是另行开发的，应该说它只是为了做 SEO 优化，由此可见 Next.js 在 SSR 以及 SEO 领域确实是有它的长处的。

其实还有更多的例子，具体可见Next.js Showcase。

Next.js 站特征

从上面几个例子可以看出，很多知名网站都是采用 Next.js 来进行开发的。可能有些人会问了，你说是 Next.js 开发的就是 Next.js 开发的？怎么才能识别出来一个网站是否是使用 Next.js 来进行开发的呢？一般来说可以通过如下几个特征来判断一个网站是否是由 Next.js 来进行开发的：

页面标签内部会有一个的元素 —— 最主要特征。
页面可能会存在一个的标签。
页面内部可能会存在 0 ～多个标签。

就以腾讯门户来检验一下，其他几个站点大家可以自行验证：

第一个 Next.js 应用 —— Hello Next.js

上面介绍了这么多，大家应该基本了解了 Next.js 是什么以及 Next.js 的一些优点。学习一门技术，必须要知道它是什么并且了解到为什么要使用它，才能更有兴趣的去学习并掌握它。

接下来就通过一个 Next.js 的 Demo 开始 Next.js 开发的入门之旅。来实际动手写一个任何语言都通用的入门级 Demo —— Hello World。

相关命令大家可以在实验楼相应环境中执行。

第一步：新建文件夹 hello-next
第二步：创建 package.json 文件

在根目录执行 npm init 命令，之后按照提示一路确认即可。

如果不喜欢复杂步骤，可以直接在 hello-next 目录下新建 package.json 文件，然后将下面的内容拷贝进去：

{"name": "hello-next","version": "1.0.0","description": "The first demo of Next.js.","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": ["next.js"],"author": "luffyZh","license": "ISC"
}

第三步：安装依赖

Next.js 是一个 React.js 框架，所以一般除了安装 Next.js 之外，还要安装 React.js 相关核心依赖。

为了避免下载太慢，可以安装并设置淘宝镜像。

npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org

然后安装 React.js 相关核心依赖。

// 执行如下命令
npm install --save next react react-dom

安装完之后，修改 package.json 文件增加一条启动命令 “start”: “next -p 8080”，它帮助我们启动 Next.js 的开发环境在 8080 端口进行访问。现在package.json 代码如下：

{"name": "hello-next","version": "1.0.0","description": "The first demo of Next.js.","main": "index.js","scripts": {"start": "next -p 8080","test": "echo \"Error: no test specified\" && exit 1"},"keywords": ["next.js"],"author": "luffyZh","license": "ISC","dependencies": {"next": "^9.1.4","react": "^16.12.0","react-dom": "^16.12.0"}
}

第四步：添加入口文件

Next.js 项目启动需要入口文件，Next.js 会默认把根目录的 pages 文件夹里面的.js文件解析成路由页，在 hello-next 目录下新建 pages/index.js 文件并写入如下内容：

什么是路由页后面课程会详细介绍。

// pages/index.jsexport default () => <h1>Hello Next.js</h1>;

使用 npm start 命令进行启动，如果你看到控制台输出下面这段话就表示启动成功了：

[ ready ] compiled successfully - ready on http://localhost:8080

点击右边工具栏 Web服务，会自动新开一个标签进入浏览器，显示的内容为Hello Next.js：

如果你是在本地创建的文件，则在浏览器访问地址 localhost:8080 即可。

本节实验只是为了让大家理解 Next.js，后续课程无需手动进行项目的初始化搭建。也可以选择一个更简单的方式来搭建 Next.js 应用并启动，即使用命令 npx create-next-app hello-next 进行快速搭建。

大家可以将本环境保存下来，接下来的实验也会使用到这个环境。本部分代码可以通过如下命令获取：

wget https://labfile.oss.aliyuncs.com/courses/1546/code3_hello-next.zip

篇幅有限，后续的课程内容，请进入课程《Next.js 轻量级 React 框架实战》边敲代码边学习～

前端教程丨手把手教你用 Next.js 搭建个人博客，从入门到吃鸡相关推荐

手把手教你从0开始搭建个人博客，东半球最详细的保姆级博客搭建部署教程 | 程序员人手必备个人博客网站
Hello 小伙伴们大家好,我是雷小帅! 想象一下你有一个技术博客,然后把网址写在了简历上,面试官点击鼠标打开了这个网站,然后被惊艳了,最后面试的结果你懂得-- 好了,今天的主题就是手把手教大家从零开 ...
手把手教你云服务器如何搭建typecho博客网站（包括配置免费SSL证书）
Typecho是一款轻量级开源博客程序.基于PHP5开发,支持多种数据库,优点是内核强健.扩展方便.体验友好.运行流畅. 轻量应用服务器可以用来构建网站.小程序/小游戏.电商.云盘/图床以及各类开发测 ...
python开发个人博客_手把手教你用 Python + Flask 搭建个人博客
Python 的语言特性使得自身编写 Web 框架极其容易,现在已经有上百种用 Python 编写的 Web 开发框架,其中用户量最大的两个就是 Django 和 Flask. Django 和 Fl ...
手把手教你写高质量Android技术博客，画图工具，录像工具，Markdown写法
前言作为程序员,写博客是一件很有意义的事情,可以加深自己对技术的理解,可以结交更多的朋友,记录自己的技术轨迹,而且分享可以让更多的人从中受益,独乐乐不如众乐乐嘛. 但是要写好博客也不是件容易的事,一 ...
手把手教你怎么用tcgames直播玩刺激战场和全军出击吃鸡手游
很多人第一次用 TC Games 电脑玩手机游戏助手不知道怎么操作.特别时很多吃鸡主播,用模拟器直播匹配的是模拟器玩家,很难带飞全场快速吃鸡.老玩家教一下大家怎么用tcgames直播刺激战场吃鸡. 如 ...
教程丨手把手教你做数据挖掘 !（附教程数据源）
转载自:数据派THU(ID:DatapiTHU) 作者:宋莹本文 11836字59图,建议阅读 30分钟. 本文介绍一个极其详尽的数据挖掘实例. 本文主要介绍基于集成学习的决策树,其主要通过不同学习 ...
手把手教你使用 Tabris.js 搭建的日记客户端 TuerApp
前言: 从9月初开始到现在,我一直在寻找一个适合自己的,可以跨平台的开发APP的js框架. 之前有接触过Weex,React Native,Flutter,NativeScript,Appjs.但是或 ...
Vue3 Typescript + Axios 全栈开发教程：手把手教你写「待办清单」APP
本文完整版:<Vue3 Typescript + Axios 全栈开发教程:手把手教你写「待办清单」APP> Vue3 Typescript + Axios 全栈开发教程前端 Vue3 ...
简单有趣的 NLP 教程：手把手教你用 PyTorch 辨别自然语言（附代码）
简单有趣的 NLP 教程:手把手教你用 PyTorch 辨别自然语言(附代码) 雷锋网(公众号:雷锋网)按:本文作者甄冉冉,原载于作者个人博客,雷锋网已获授权. 最近在学pyTorch的实际应用 ...

前端教程丨手把手教你用 Next.js 搭建个人博客，从入门到吃鸡