Skip to content

Commit

Permalink
Update the velite post
Browse files Browse the repository at this point in the history
  • Loading branch information
noobnooc committed Aug 28, 2024
1 parent 5097cdf commit 858e1dd
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 6 deletions.
7 changes: 4 additions & 3 deletions content/posts/2024-03-15 set-up-blog-with-velite/en.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ title: Integrating a Static Blog in a Next.js Project with Velite
slug: integrate-a-blog-in-nextjs-with-velite
lang: en
date: 2024-03-17 00:00:00
updated: 2024-08-28 00:00:00
categories:
- development
description: In this article, I'll explain how to use Velite to add a static blog feature to a website built with Next.js. The final result will be similar to the blog system on this site.
Expand Down Expand Up @@ -127,10 +128,10 @@ After adding these two lines to `.gitignore`, Velite will not affect the state o

If we execute the `npx velite` command, Velite will start processing files according to our definitions (because we haven't told it how to process which files, so it won't process anything). However, every time we want to execute `npx velite` in the development process, it's a bit cumbersome. So we can integrate the processing into Next.js, and let Velite automatically detect file changes and process them during `next dev` or `next build`.

To implement this operation, we can add Velite's processing logic to `next.config.js`. Open the `next.config.js` file in the root directory and replace it with the following content:
To achieve this operation, we can add Velite's processing logic in `next.config.js`. However, because this configuration uses `await` at the root of the file, we need to convert the file to ES Module format. Therefore, rename `next.config.js` to `next.config.mjs` and replace the content with the following configuration:

```js
// next.config.js
// next.config.mjs

const isDev = process.argv.indexOf('dev') !== -1
const isBuild = process.argv.indexOf('build') !== -1
Expand All @@ -146,7 +147,7 @@ const nextConfig = {
swcMinify: true,
};

module.exports = nextConfig;
export default nextConfig;
```

> If you have modified the default configuration file of Next.js before, you can add the Velite-related logic according to your configuration.
Expand Down
7 changes: 4 additions & 3 deletions content/posts/2024-03-15 set-up-blog-with-velite/zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ title: 使用 Velite 在 Next.js 项目中集成一个静态博客
slug: integrate-a-blog-in-nextjs-with-velite
lang: zh
date: 2024-03-17 00:00:00
updated: 2024-08-28 00:00:00
categories:
- development
description: 在这篇文章里,我会介绍如何使用 Velite ,为使用 Next.js 搭建的网站,添加一个静态博客的功能。最终效果如本站的博客系统。
Expand Down Expand Up @@ -127,10 +128,10 @@ public/static

这时如果我们执行 `npx velite` 命令,Velite 就会按照我们的定义开始处理文件了(因为我们没有告诉它该以何种方式处理哪些文件,所以不会进行任何处理)。但是,在开发过程中,每次都要执行 `npx velite` 难免有点繁琐,所以我们可以将处理过程集成到 Next.js 中,在执行 `next dev``next build` 的过程中,让 Velite 自动检测文件变化并处理。

要实现这个操作,我们可以在 `next.config.js` 中添加 Velite 的处理逻辑。打开根目录下的 `next.config.js` 文件,并替换为以下内容
要实现这个操作,我们可以在 `next.config.js` 中添加 Velite 的处理逻辑,不过因为该配置在文件根部使用了 `await` ,要将文件改为 ES Module 的形式,所以需要将 `next.config.js` 更名为 `next.config.mjs`,并将内容替换为如下配置

```js
// next.config.js
// next.config.mjs

const isDev = process.argv.indexOf('dev') !== -1
const isBuild = process.argv.indexOf('build') !== -1
Expand All @@ -146,7 +147,7 @@ const nextConfig = {
swcMinify: true,
};

module.exports = nextConfig;
export default nextConfig;
```

> 如果在这之前你已经修改过了 Next.js 的默认配置文件,可以根据自己配置,参照以上的内容将 Velite 相关逻辑添加进去。
Expand Down

0 comments on commit 858e1dd

Please sign in to comment.