了解Next.js
Next.js 是一个基于 React 的框架，专为构建服务器端渲染（SSR）和静态站点生成（SSG）的应用程序而设计。它提供了丰富的功能和工具，可以帮助开发者快速构建高性能的网站和应用程序。
为什么选择Next.js？
- 服务器端渲染：提高首屏加载速度，提升SEO优化。
- 静态站点生成：适用于不需要动态交互的静态网站。
- 组件化开发：提高开发效率和代码可维护性。
- 丰富的插件和扩展：满足不同场景下的开发需求。
从零开始搭建Next.js博客
准备工作
- 安装Node.js：Next.js 需要 Node.js 环境支持，版本建议为 14 或更高。
- 安装Next.js：使用 npm 或 yarn 安装 Next.js。
npx create-next-app my-blog
cd my-blog
创建博客文章
- 创建文章目录：在
pages目录下创建文章目录，例如pages/posts。 - 编写文章：在文章目录下创建
.mdx文件，例如pages/posts/my-first-post.mdx。
---
title: 我的博客第一篇文章
date: 2022-01-01
---
# 我的博客第一篇文章
这是我的博客第一篇文章，欢迎来到我的博客！
静态站点生成
- 配置
next.config.js：在项目根目录下创建next.config.js文件，配置静态站点生成。
module.exports = {
generateStaticPages: async () => {
const posts = [
{ slug: 'my-first-post' },
// ... 其他文章
];
return posts.map((post) => ({
params: { slug: post.slug },
}));
},
};
- 访问文章：在浏览器中访问
http://localhost:3000/posts/my-first-post，即可看到生成的文章。
部署博客
- 选择云服务提供商：例如 Vercel、Netlify 等。
- 创建账号并配置项目：按照云服务提供商的指引进行操作。
- 部署博客：将本地项目上传到云服务提供商，即可在线访问。
高级功能
动态路由
- 创建动态路由：在
pages目录下创建以[...slug].js为后缀的文件。
export async function getStaticPaths() {
return {
paths: [{ params: { slug: 'my-first-post' } }],
fallback: false,
};
}
export async function getStaticProps(context) {
const { slug } = context.params;
// ... 获取文章数据
return {
props: {
// ... 将文章数据传递给页面
},
};
}
- 访问动态路由：在浏览器中访问
http://localhost:3000/posts/my-first-post，即可看到动态生成的文章。
美化博客
- 引入CSS样式：在
styles目录下创建样式文件，例如styles/globals.css。 - 全局应用样式：在
pages/_app.js文件中引入全局样式。
import '../styles/globals.css';
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;
- 自定义组件：创建自定义组件，例如导航栏、侧边栏等。
总结
通过以上步骤，你已经成功搭建了一个基于 Next.js 的个人博客。接下来，你可以根据自己的需求进行扩展和优化，让你的博客焕然一新！