Next js와 Velite js를 사용해서 개인 블로그 만들기

npm install velite -D

import { defineConfig, s } from "velite";
 
export default defineConfig({
  collections: {
    posts: {
      name: "Post", // 컬렉션 이름
      pattern: "posts/**/*.md", // posts 폴더 안에 있는 모든 md 파일을 가져온다.
      schema: s
        .object({
          title: s.string().max(99), // velite에서는 스키마를 s로 사용한다.
          slug: s.path(),
          date: s.isodate(),
          thumbnail: s.image(),
          video: s.file().optional(),
          metadata: s.metadata(),
          excerpt: s.excerpt(),
          content: s.markdown(),
        })
        .transform((data) => ({ ...data, permalink: `/blog/${data.slug}` })),
    },
    others: {},
  },
});

import { build } from "velite";
 
/** @type {import('next').NextConfig} */
export default {
  // 또 다른 코드들... 생략
  webpack: (config) => {
    config.plugins.push(new VeliteWebpackPlugin());
    return config;
  },
};
 
class VeliteWebpackPlugin {
  static started = false;
  constructor(/** @type {import('velite').Options} */ options = {}) {
    this.options = options;
  }
  apply(/** @type {import('webpack').Compiler} */ compiler) {
    compiler.hooks.beforeCompile.tapPromise("VeliteWebpackPlugin", async () => {
      if (VeliteWebpackPlugin.started) return;
      VeliteWebpackPlugin.started = true;
      const dev = compiler.options.mode === "development";
      this.options.watch = this.options.watch ?? dev;
      this.options.clean = this.options.clean ?? !dev;
      await build(this.options);
    });
  }
}

/** @type {import('next').NextConfig} */
/* eslint import/no-anonymous-default-export: [2, {"allowObject": true}] */
export default {
  // othor next config here...
  webpack: (config) => {
    config.plugins.push(new VeliteWebpackPlugin());
    return config;
  },
};

.velite
/public/static