velite with next js and src directory

[sankalp51]

how can I use velite with next js and src directory?

[zce]

I don't think using the src directory makes any difference, you can also output velite dist to a subdirectory of src

[sankalp51]

I actually initially set up my project with the src directory and followed the documentation of setting up velite with next js but I could not get the content to load up then I had to remove the src directory and use the root directory based app router, only then it started working

[zce]

show me the reproducible repo

[sankalp51]

repo link: https://github.com/sankalp51/blog.git
commit ID: 9b00e8fc661eed0c7387bcbdf730ae0ee73b3721

[zce]

// velite.config.ts
export default defineConfig({
  root: "content", // <= "src/content"
  output: {

[sankalp51]

The second issue

When you set your root to src/content, all file matching is done relative to that directory. In my original configuration, the pattern for blog posts is defined as:

pattern: "/blog/**/*.mdx",

The fix

pattern:blog/**/*.mdx

The entire fixed configuration

import { defineCollection, defineConfig, s } from "velite";

const computedFields = <T extends { slug: string }>(data: T) => {
  return {
    ...data,
    slugParams: data.slug.split("/").slice(1).join("/"),
  };
};

const posts = defineCollection({
  name: "post",
  // Removed the leading slash here
  pattern: "blog/**/*.mdx",
  schema: s
    .object({
      slug: s.path(),
      title: s.string().max(99),
      description: s.string().max(999).optional(),
      date: s.isodate(),
      published: s.boolean().default(true),
      body: s.mdx(),
    })
    .transform(computedFields),
});

export default defineConfig({
  root: "src/content",
  output: {
    data: ".velite",
    assets: "public/static",
    base: "/static/",
    name: "[name]-[hash:6].[ext]",
    clean: true,
  },
  collections: { posts },
  mdx: {
    rehypePlugins: [],
    remarkPlugins: [],
  },
});

[sankalp51]

thank you @zce for helping with this issue, I just started learning velite with the documentation and a youtube tutorial.