使用Next.js创建Blog

Next.js 已经成为 React 应用程序最重要的框架之一。它可以帮助开发人员在没有模板的情况下构建更好的服务器端渲染 React 应用程序。

Next.js 之所以能成为目前最好的 React 框架之一，与其很多特性离不开，比如打包构建、路由预取、TypeScript、SEO 等。

对于那些想要拥有一个简单但功能强大的博客的人来说，使用 Next.js 创建博客是当今的最佳选择。

SEO（搜索引擎优化）是改进应用程序在搜索引擎排名的过程。对于任何想要在搜索引擎上获得更好排名并带来更多流量的博客来说，这都是非常重要的。

我们将在本文中使用 Next.js 来构建博客。我们将介绍 SSG（静态站点生成）的工作原理，并完成 SEO 友好的博客。

入门

使用官方推荐的Create Next App创建项目

为什么要使用Create Next App

• 交互式体验：不带任何参数运行npx create-next-app@latest，将会开启交互模式，引导创建项目
• 零依赖：Create Next App没有依赖，毫秒级创建项目
• 离线支持：Create Next App侦测网络状态，无网状态将使用本地依赖缓存
• 支持模板：通过加入--example参数，可以拉取官方仓库任何模板
• 集成测试：集成测试功能

创建完成后项目目录构造如下：

安装依赖

创建文章

根目录新增_posts目录，在_posts目录下创建两个mdx文件(_posts/js/helloWorld.mdx,_posts/demo.mdx)，为什么是mdx文件呢？mdx支持渲染组件，支持引入导出组件，详细文档参考MDX

创建公共函数目录

根目录新增utils目录，在utils目录下创建getAllPosts.js并写入如下函数

创建组件

根目录新增components目录

1. 创建PostPage.tsx组件，内容如下：

1. 创建pages/index.tsx

1. 创建pages/[...slug].tsx

至此，基本框架搭建完成，接下来调整样式及组件的引入，以及 mdx 渲染修正。

1. 调整样式

可选

引入tailwind.css，执行pnpm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p

修改tailwind.config.js,如下：

修改全局样式styles/globals.scss

必须

修改pages/_app.tsx，引入chakra-ui的配置

到这里，不出意外，你的界面应该是长这样

使用Next.js创建Blog

点击链接，应该会报错，未引入utils/components，这个是配置 mdx 内元素渲染的组件，参考MDX Components，mdx 提供默认的渲染组件，所以，这个是非必须的，不需要删除即可

个人比较喜欢 chakra-ui，所以将组件都转成了 chakra-ui 提供的组件，配置如下：

好了，到这里基本完成了基于Next.js的博客搭建。

部署到Vercel

Next.js部署到Vercel无需更改和配置，无缝衔接。

使用Next.js创建Blog

使用Next.js创建Blog

使用Next.js创建Blog

使用Next.js创建Blog