这是我参与「第五届青训营」伴学笔记创作活动的第14天

前言

毫无疑问,程序员们都非常喜欢React及其丰富的特性,这些特性帮助我们在浏览器上创造奇迹。但是，人类总是善于改进并前进以优化缺点并产生更多的优点。Next.js基于React，为程序员开发提供了框架和库。

Next.js是什么

• Next.js 是一个构建于 Node.js之上的开源 Web 开发框架支持基于 React 的 Web 应用程序功能，例如服务端渲染和生成静态网站
• 上手快，能力集全，而且覆盖了足够多的性能优化和生态
• 对于新同学掌握前后端一体化的开发模式很友好

《狼书（卷3）：Node.js高级技术》修订版中给next.js一个明确观点："整体来看，Next.js在Node.js Web开发领域是一个非常优秀的SSR框架，其众多优秀特性，外加Blitzjs这种周边生态，对于开箱即用的项目来说是极好的。从架构的角度，笔者以为Next.js是过度设计，从商业的角度，我认同Next.js的做法，易用性应该是开发领域最该重视的核心。"

CSR, SSR, SSG

Next基于React，支持CSR, SSR, SSG等渲染或用于渲染的生成方式

• CSR(Client-Side Rendering)客户端渲染，常见 B 端WEB 应用开发模式，前后端分离,服务器压力相对更轻，渲染工作在客户端进行，服务器直接返回不加工的 HTML 用户在后续访问操作。
• SSR(Server-Side Rendering)服务端渲染，也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端。
• SSG(Static Site Generation)静态站点生成，在构建的时候直接把结果页面输出html到磁盘，每次访问直接把html返回给客户端，相当于一个静态资源。

快速创建Next.js项目

1、要创建 Next.js 应用，请打开你的终端窗口，cd 进入您要在其中创建应用程序的目录，然后运行以下命令：
npm init next-app nextjs-blog --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter" 2、运行

cd nextjs-blog
yarn dev

3、编写组件

function Text (){
    return(
        <h3>Hello, world!</h3>
    )
}
export default Text;

除此之外，Next内容还有很多。如需了解更多，参考Next从入门到实战