Nextjs基础-静态博客

静态博客：将文章通过MDX的格式存到服务器，再从服务器SSG静态渲染

如果你只是想搭建一个静态博客，那么看完这篇文章你就已经可以毕业了，因为它真的难度不大。

MDX

既然看这篇文章，我默认你有使用markdown记录的习惯，如果你还不了解markdown，我建议你从现在开始用markdown记录你的一切。

mdx是md文件的超集，它允许你在md文件中使用jsx，也就意味着你可以通过组件的形式写文章。不过也不需要刻意学习，因为它只是超集，你还是可以用原来的方法写你的文章。

next支持markdown， 使用 mdx 只需要安装一些依赖

npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx

获取mdx并显示

在应用程序里使用mdx

src/app/hellow.mdx

需要四步：

1. 在/src文件夹中创建mdx-components.tsx文件

   // This file allows you to provide custom React components
   // to be used in MDX files. You can import and use any
   // React component you want, including components from
   // other libraries.
    
   // This file is required to use MDX in `app` directory.
   export function useMDXComponents(components) {
     return {
       // Allows customizing built-in components, e.g. to add styling.
       // h1: ({ children }) => <h1 style={{ fontSize: "100px" }}>{children}</h1>,
       ...components,
     }
   }
   

2. 在next.config.js配置

   /** @type {import('next').NextConfig} */
   const nextConfig = {
     experimental: {
       mdxRs: true,
     },
   }
    
   const withMDX = require('@next/mdx')()
   module.exports = withMDX(nextConfig)
   

3. 把hellow.mdx放入/app文件夹中

   Hello, Next.js!
    
   You can import and use React components in MDX files.
   

4. 在page.jsx中引入hellow.mdx

   import HelloWorld from './hello.mdx'
    
   export default function Page() {
     return <HelloWorld />
   }
   

以上的做法其实并不常见，因为你不会直接把文件放到应用程序中，一般会把它放到服务器中。

在服务器中存放MDX

这个时候就要使用fetch远程获取了，如果你选择这种方法，上面所有的东西你都可以忘记了。

先安装next-mdx-remote这个依赖，这个依赖可以帮我们解析mdx文件。

npm i next-mdx-remote

这是官方文档的示例

import { MDXRemote } from 'next-mdx-remote/rsc'
 
export default async function Home() {
  const res = await fetch('https://...')
  const markdown = await res.text()
  return <MDXRemote source={markdown} />
}

应该比较好理解，引入MDXRemote就能解析获取来的内容了

还有一个问题，如果你照着做了，你可能会发现它无法识别表格、目录、高亮。

还好他们还准备了插件，如remark-gfm这个就是解决表格显示问题的,rehype-stringify是将语法树序列化为HTML文档

nom i remark-gfm rehype-stringify

这个时候只需要在next.config.js配置一下。如果使用ES模块的import引用则需要将next.config.js改为next.config.mjs(重点)

//next.config.mjs
import remarkGfm from 'remark-gfm'
import rehypeStringify from 'rehype-stringify'
import createMDX from '@next/mdx'
 
/** @type {import('next').NextConfig} */
const nextConfig = {}
 
const withMDX = createMDX({
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
  options: {
    extension: /\.mdx?$/,
    remarkPlugins: [remarkGfm],//
    rehypePlugins: [rehypeStringify],
    // If you use `MDXProvider`, uncomment the following line.
    // providerImportSource: "@mdx-js/react",
  },
})
export default withMDX(nextConfig)

还有许许多多的插件，比如数学公式什么的，可以自己再进一步的探索。

元数据

如果你想让你的博客标签页显示博客的名称或者你想要定义的名称，你可以把它写在元数据中

---
id: head-metadata
title:你好，下一个
---
# hellow Next

样式

样式这种东西仁者见仁，不过直接解析展示出来的样式肯定不好看。如果你会CSS in JS 那么恭喜你，无论是Next还是MDX,对CSS in Js都很推崇，但是我不习惯，我还是习惯使用scss或者less这种预编译样式。

你可以下载一个GitHub的样式，直接用scss拉到mdx的父盒子里，这样只有再这个盒子里样式才是OK的。

总结

现在你已经拥有了一个静态的博客，和之前的布局、链接联系起来，你就有了最简单的博客。

很多东西还是需要多试，这个文档只能快速入门，官方文档非常全面，但是有些东西不注意就遗漏了。

目前我使用的方式是将博客内容保存在数据库，并在后台写一个博客的增删改查，再通过客户端渲染，使用react-markdown的方式进行解析。

在下一章我们简单介绍一下数据库存储md的方式。