Nuclear membrane Posts - Answer Overflow

Nuclear membrane

•Created by Nuclear membrane on 3/26/2024 in #front-end

nothing is rendering in nextjs page when mapping through an array

I have an object metaDatas with two properties: slugs and titles. both of them are arrays. slugs are for links and titles are for the titles of the document I want to show to the end user.

const getAllPostsMetadata = async () => {
  //get the names of the documents to generate slugs
  const folder = "content/docs/";
  const files = fs.readdirSync(folder);
  const docs = files.filter((file) => file.endsWith(".mdx"));
  const slugs = docs.map((file) => file.replace(".mdx", ""));
  const titles = [];
  //get the metadata from using slugs and set the titles
  for (const slug of slugs) {
    const { metaData } = await import(`@/content/docs/${slug}.mdx`);
    titles.push(metaData.title);
  }
  return { slugs, titles };
};

const getAllPostsMetadata = async () => {
  //get the names of the documents to generate slugs
  const folder = "content/docs/";
  const files = fs.readdirSync(folder);
  const docs = files.filter((file) => file.endsWith(".mdx"));
  const slugs = docs.map((file) => file.replace(".mdx", ""));
  const titles = [];
  //get the metadata from using slugs and set the titles
  for (const slug of slugs) {
    const { metaData } = await import(`@/content/docs/${slug}.mdx`);
    titles.push(metaData.title);
  }
  return { slugs, titles };
};

in my component I am getting the metaDatas obj asynchronously. const metaDatas = await getAllPostsMetadata(); finally this is how I am rendering the links:

{metaDatas.slugs.map((slug, index) => {
        <Link href={`/learn/${slug}`} key={slug}>
          something
        </Link>;
 })}

{metaDatas.slugs.map((slug, index) => {
        <Link href={`/learn/${slug}`} key={slug}>
          something
        </Link>;
 })}

but nothing is showing up. only the links without dynamic routes are showing up

2 replies

Gaming

Programming