Next.js+TypeScript搭建一个简易的博客系统
Next.js+TypeScript搭建⼀个简易的博客系统
最近想攻关⼀个 node.js 框架。希望到⼀个能够帮我们把⼤部分事情都做好的框架，可以直接上⼿快速开发。不像传统的Express、Koa 需要配置⼤量中间件。按照这个想法，⾕歌了⼀下就是 —— Next.js 了。最后完成了⼀个简易的博客系统，
代码地址: github/Maricaya/nextjs-blog
预览地址：121.36.50.175/
不得不说 SSR 真⾹，⼏乎没有⽩屏时间，加载⾮常快。
来记录下学习（踩坑）的过程，这篇⽂章的代码都在github/Maricaya/nextjs-blog-1啦。
先来看看 Next.js 是什么吧。
Next.js 是⼀个全栈框架
Next.js 是⼀个轻量级的 React 服务端渲染应⽤框架。
它⽀持多种渲染⽅式：客户端渲染、静态页⾯⽣成、服务端渲染。
使⽤Next.js 实现 SSR 是⼀件很简单的事，我们完全可以不⽤⾃⼰去写webpack等配置，Next.js 都帮我们做好了。
弱项
上⾯讨论了 Next.js 的很多优点，但每个框架都有不完美的地⽅，尤其是在 Node.js 社区。
作为⼀个后端框架，Next.js 完全没有提供操作数据库的相关功能，只能⾃⾏搭配其他框架。（⽐如 Sequelize 或者 TypeORM）。也没有提供测试相关功能，也需要⾃⾏搭配，可以选择 Jest 或者 Cypress。
现在我们基本了解了 Next.js，接下来跟着官⽹做⼀个简单的项⽬吧。
创建项⽬
# nextjs-blog-1 是我们的项⽬名称
npm init next-app nextjs-blog-1
选择 Default starter app。
进⼊ nextjs-blog-1，⽤命令⾏启动项⽬ yarn dev。精装修验房注意事项及细节
看到下⾯这个页⾯，就说明你的项⽬启动成功啦。
下⾯我们为项⽬加上 TypeScript！
启动 TypeScrip！
第⼀步就是安装 TypeScript。
yarn global add typescript
创建 tsconfig.json景德镇景点
然后我们运⾏ tsc \--init，得到 tsconfig.json，这是 TypeScript 的配置⽂件。接下来安装类型声明⽂件，然后重启项⽬。
yarn add --dev typescript @types/react @types/node
yarn dev
然后我们将⽂件名 index.js 改为 index.tsx。
创建第⼀篇⽂章
根⽬录下创建 posts ⽂件夹，我们的⽂章放在这个路径下。
创建 posts/first-post.tsx ⽂件，写⼊代码：
// 第⼀篇⽂章
import React from "react"
import {NextPage} from 'next';魔域1.04
const FirstPost: NextPage = () => {
return (
<div>First Post</div>
)
}
export default FirstPost;
这个时候访问 localhost:3000/hosts/first-post 就能看见页⾯了。
Link 快速导航
祝福领导的短信官⽹中介绍了 Link 快速导航。
稍微了解前端同学们可能会有这样的问题，不是有 a 标签可以导航吗，Next.js 为什么要多此⼀举。据官⽹介绍，Link 可以实现快速导航。我们来做个实验，看看它和 a 标签有什么不同。
先在项⽬分别中使⽤ a 标签、Link 标签导航，实现⾸页和第⼀篇⽂章互相跳转。
index.tsx
<h1 className="title">
第⼀篇⽂章
<a href="/posts/first-post">a 点击这⾥</a>
<Link href="/posts/first-post"><a >link 点击这⾥</a></Link>
</h1>
/posts/first-post.tsx
// 回到⾸页
<hr/>
<a href="/">a 点击这⾥</a>
<Link><a href="/">link 点击这⾥</a></Link>
点击 a 标签，每次进⼊ first-post、index 页⾯，浏览器都会重新请求所有的 html、css、js。
接下来使⽤ Link 标签导航，神奇的事情发⽣了，浏览器只发送了 2 个请求。
第⼆个请求是 webpack，所以真实的请求只有 1 个，就是 first-post.js。
反复在两个页⾯中跳转，除了 webpack，浏览器没有发出任何请求。
Next.js 到底做了什么？快速导航和传统导航有什么区别？
防爆轮胎和普通轮胎的区别传统导航
我们先来看看从 page1 到 page2，传统导航是怎么实现的
访问第⼀个页⾯ page1 时，浏览器请求 html，然后依次加载 css、js。
当⽤户点击 a 标签，就重定向到 page2，浏览器请求 html，然后再次加载 css、js。
Link 快速导航
再看相同的过程，Next.js 中的快速导航是怎么实现的。
⾸先访问 page1，浏览器下载 html，然后依次加载 css、js。这些和传统导航⼀样。
但是当⽤户点击 Link 标签时， page1 会执⾏⼀个 js，这个js 会对 Link 标签进⾏解析，点击 Link 之后请求 page2 的 page2.js，这个page2.js 就是 page2 的 html+css+js。
请求完 page2.js 之后，会回到 page1 的页⾯，把 page2 的 html、css、js 更新到 page1 上。也就是把 page1 更新为 page2。
所以，浏览器没有亲⾃访问过 page2，⽽是 page1 通过 ajax 来获取 page2 的内容。
优点白露的古诗
所以，Link 快速导航（客户端导航）有这么多优点：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。