Published on

Blog Language Switch Bug Fix

Authors
  • Name
    Twitter

Issue 1: Prettier Formatting Conflicts Causing Build Failure

When modifying the tag page [lang]/tags/[tag]/page.tsx, Prettier's formatting requirements for chain calls kept changing:

  • Single-line version required splitting to multiple lines
  • Multi-line version required collapsing to single line

Root Cause: When conditions connected by && are split across lines, Prettier's printWidth and arrowParens rules conflict.

Solution: Refactor the chain filter callback to use traditional if statements, avoiding complex logic on a single line:

// Before
allBlogs.filter((post) => post.language === lang && post.tags && post.tags.map(...))

// After
allBlogs.filter((post) => {
  if (post.language !== lang) return false
  if (!post.tags) return false
  const postTagSlugs = post.tags.map((t) => slug(t))
  return postTagSlugs.includes(tagDecoded)
})

Issue 2: About Page Pre-rendering Failure

During deployment, the About page threw an error: TypeError: Cannot read properties of undefined (reading 'body')

Root Cause: Author lookup used p.slug === 'default', but contentlayer's computed field calculates slug differently for Authors type compared to Blog type, causing the match to fail.

Solution: Use the name field to find the author instead:

// Before
const author = allAuthors.find((p) => p.slug === 'default')

// After
const author = allAuthors.find((p) => p.name === 'FeiFan')

Issue 3: Duplicate Blog Path Problem

Clicking a blog title from the homepage redirected to /zh/blog/zh/blog/... (duplicate language prefix), while navigation from the navbar worked correctly.

Root Cause: The homepage blog list directly拼接了 /${lang}/blog/${slug}, but post.slug already contains the full path zh/blog/first-blog.

Solution: Use the full slug as the path directly, without extra language prefix:

// Before
<Link href={`/${lang}/blog/${slug}`}>

// After
<Link href={`/${slug}`}>

Issue 4: Duplicate Blog File Causing 404

Build log warned blog/first-blog.mdx is missing the language field.

Root Cause: There was a duplicate blog file (not in zh/en subdirectory, missing language field) conflicting with properly located blog files.

Solution: Delete the duplicate blog file, keeping only versions in respective language directories.

Summary

These issues were relatively hidden, involving the interaction between content management system, static generation, and i18n configuration. The key is to understand how contentlayer's computed fields process different document types and how link paths are constructed. Debugging these issues requires careful examination of build logs and understanding the dependencies between configuration items.