Next.js Discord

Discord Forum

Instead change the require of index.js in ... to a dynamic import()

Unanswered
Dutch posted this in #help-forum
Open in Discord
DutchOP
I am not able to fix this for some reason, but on my website i have a blog system that renders an mdx file into the slug, and it works fine normally. But if i refresh the page, or open its URL directly, it returns a 500 but still shows the content, the problem is google cloud console disliking this issue.

So yea here is the files related to blog posts:

getPost.ts
export const getPost = cache(
  async (
    slug: string
  ): Promise<{
    source: MDXRemoteSerializeResult
    frontMatter: FrontMatter
  }> => {
    const postFilePath = path.join(POST_PATH, `${slug}.mdx`)
    const source = await readFile(postFilePath)

    const { content, data } = matter(source)

    const mdxSource = await serialize(content, { scope: data })

    return {
      source: mdxSource,
      frontMatter: data as FrontMatter
    }
  }
)

blog/[slug].tsx
export async function generateMetadata({
  params: { slug }
}: {
  params: { slug: string }
}): Promise<Metadata> {
  const { frontMatter } = await getPost(slug)
  const title = frontMatter.title + "- Would You Bot"

  return {
    title,
    description: frontMatter.description,
    metadataBase: new URL("https://wouldyoubot.gg/blog/"),
    openGraph: {
      title,
      publishedTime: frontMatter.seoDate,
      type: "article",
      description: frontMatter.description,
      authors: frontMatter.author.name,
      tags: frontMatter.tags,
      images: frontMatter.thumbnail?.large
    }
  }
}

export function generateStaticParams() {
  return postPaths
    .map((path) => path.replace(/\.mdx?$/, ""))
    .map((slug) => ({ slug }))
}

const BlogPost = async ({ params: { slug } }: { params: { slug: string } }) => {
  const { source, frontMatter } = await getPost(slug)

  return (
    <>
      <div className="w-full max-w-8xl mx-auto px-8 text-neutral-300">
        <Link
          href="/blog"
          className="text-neutral-300 transition-all hover:text-white"
        >
          <p className="mb-4">&larr; Back</p>
        </Link>
        {frontMatter.thumbnail?.banner && (
          <Image
            src={frontMatter.thumbnail.banner}
            alt={frontMatter.title + "- Would You Bot"}
            width={1000}
            height={200}
            className="mb-4 h-auto w-full rounded-lg"
          />
        )}
        <h1 className="text-4xl font-bold text-white">{frontMatter.title}</h1>
        <p className="mt-4">{frontMatter.description}</p>
        <div className="mt-4 flex items-center">
          <Image
            src={frontMatter.author.avatar}
            alt={frontMatter.author.name}
            width={30}
            height={30}
            className="h-10 w-10 rounded-full"
          />
          <div className="ml-4">
            <p className="text-neutral-300">{frontMatter.author.name}</p>
            <p className="text-sm text-neutral-400">{frontMatter.date}</p>
          </div>
        </div>
        <div className="my-4 flex flex-wrap gap-1 border-b border-b-neutral-500 pb-4">
          {frontMatter.tags.map((tag) => (
            <p
              key={tag}
              className="min-w-fit rounded-full border border-neutral-500 px-2 py-1 text-xs text-neutral-300"
            >
              {tag}
            </p>
          ))}
        </div>
        <div className="xl: relative left-0 top-0 mb-10 flex border-b border-neutral-500 pb-5 xl:fixed xl:left-4 xl:top-40 xl:border-b-0">
          <TableOfContents toc={frontMatter.toc ?? []} />
        </div>
      </div>

      <MainContent source={source} />
    </>
  )
}

export default BlogPost

0 Replies