关于我第一次使用Next.js这件事

Next.js是什么

Next.js 是一个构建于Node.js 之上的开源Web 开发框架，支持基于React 的 Web 应用程序功能，例如服务端渲染和生成静态网站。 React 于官方文件内的“推荐的工具链”中提及Next.js，建议将其作为“使用 Node.js 构建服务器渲染网站”的解决方案。

——Wikipedia

关于我用Next.js这件事

最近乱搞了一个东西需要用到一个静态页面，因为我懒得造轮子又突然想起来有个叫Next.js的东西于是乎我开始了噩梦的自学过程

为什么我使用Next.js

Next.js非常先进，想要快速生成一个整体的静态网站用它是很不错的选择

同时，Next.js还支持Markdown，这个是非常好的

从Vercel上偷模板

首先如果你不知道Vercel是什么，那我先跟你介绍一下

Vercel是一个Serverless的搭建平台，他跟Github Pages的有两个不同

1.它可以直接导入源部署

2.Vercel AGA网络在中国大陆地区的访问速度会更快

那么Vercel对新手也是很照顾的，准备了一堆模板

我使用模板的原因是因为我是初次接触Next.js，学习一个新潮的东西最好的开始就是改模板

其中就有Next.js

那么我选择了Blog Starter Kit (GIthub)，我选这个模板的原因是因为这个有一个完整的博客框架，比较适合拿来演示

选择好模板直接 Create 就可以了

修改页面

Next.js存放页面的文件夹是 /pages/

可以看到有现成的 mdx 文件（实际上就是另类的爆改版Markdown）

这个模板的Next.js还是很好改的，只要你会用Markdown

当然我也用过不好改的tsx形式的Next.js模板，目前已经在Vercel模板中移除了，但是在Github上还有仓库(vercel/preview-mode-demo)

直接在Github修改并 commit ，Vercel在收到新的提交之后就会自动开始部署了

例子：插入图片

在Next.js你不能使用常规的方法去添加图片，接下来我会简单讲一下如何插入图片

首先你要在页面文件中加入 next/image 模块

将下列代码加入到页面文件的某一行（比如首行或尾行）

import Image from 'next/image'

然后就可以添加图片了，以下是添加一张图片的例子

<Image
  src="/images/photo2.jpg" <!--图片链接-->
  alt="Photo" <!--I think you know what is "alt"-->
  width={1125} <!--I think you know what is "width"-->
  height={750} <!--I think you know what is "height"-->
  priority <!--I think yo uknow what is "priority"-->
/>

参考Next.js的 next/image 文档

尾巴

最后，Next.js是好东西，但是因为某些原因你可能需要去适应一些不同（？