Published 2022-11-24 09:50:16
Next.js - Building a 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
目录
- 创建
PostPage.tsx
组件,内容如下:
- 创建
pages/index.tsx
- 创建
pages/[...slug].tsx
至此,基本框架搭建完成,接下来调整样式及组件的引入,以及 mdx 渲染修正。
- 调整样式
可选
引入tailwind.css
,执行pnpm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p
修改tailwind.config.js
,如下:
修改全局样式styles/globals.scss
必须
修改pages/_app.tsx
,引入chakra-ui
的配置
到这里,不出意外,你的界面应该是长这样
点击链接,应该会报错,未引入utils/components
,这个是配置 mdx 内元素渲染的组件,参考MDX Components,mdx 提供默认的渲染组件,所以,这个是非必须的,不需要删除即可
个人比较喜欢 chakra-ui,所以将组件都转成了 chakra-ui 提供的组件,配置如下:
好了,到这里基本完成了基于 Next.js 的博客搭建。
部署到 Vercel
Next.js 部署到 Vercel 无需更改和配置,无缝衔接。
【Source Code】
也可以参考我的个人网站Manon.icuGithub Source Code