Uh oh!
There was an error while loading. Please reload this page.
[WIP] Add support for default language configuration - #18
Conversation
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Pull request overview
This PR implements internationalization (i18n) support for the ObjectStack documentation site using Fumadocs. It introduces automatic language detection, multi-language routing with a [lang] dynamic segment, and clean URL structures that hide the default language prefix.
Changes:
- Added i18n configuration and middleware for automatic language detection and routing
- Restructured the app directory to support language-based routing with
[lang]dynamic segments - Updated the source loader to integrate i18n configuration
- Modified workspace configuration to optimize build dependencies
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
pnpm-workspace.yaml | Added build optimization for esbuild and sharp dependencies (unrelated to i18n) |
apps/docs/middleware.ts | Created middleware for automatic language detection and redirection |
apps/docs/lib/i18n.ts | Created i18n configuration defining supported languages (en, cn) and default language |
apps/docs/app/source.ts | Integrated i18n configuration with the Fumadocs source loader |
apps/docs/app/page.tsx | Replaced homepage with fallback redirect to default language |
apps/docs/app/layout.tsx | Simplified root layout to delegate to language-specific layouts |
apps/docs/app/[lang]/page.tsx | Created language-aware homepage (moved from root) |
apps/docs/app/[lang]/layout.tsx | Created language-specific layout with HTML structure and RootProvider |
apps/docs/app/[lang]/docs/layout.tsx | Created language-aware docs layout using language-specific page tree |
apps/docs/app/[lang]/docs/[[...slug]]/page.tsx | Updated to accept and use language parameter for page rendering |
Comments suppressed due to low confidence (2)
apps/docs/app/[lang]/docs/[[...slug]]/page.tsx:23
- The source.getPage call is missing an 'await' keyword. While this may work if the function is synchronous, it's inconsistent with the async/await pattern used elsewhere in this file (e.g., line 22 with await props.params). Verify whether source.getPage returns a Promise and add await if necessary for consistency.
apps/docs/app/[lang]/docs/[[...slug]]/page.tsx:52 - The source.getPage call in generateMetadata is missing an 'await' keyword. This should be consistent with the async/await pattern used for awaiting props.params on line 51. Verify whether source.getPage returns a Promise and add await if necessary.
| export default function RootLayout({ children }: { children: ReactNode }) { | ||
| // Root layout is only used for redirects with middleware | ||
| // The actual layout is in [lang]/layout.tsx | ||
| return children; |
There was a problem hiding this comment.
The root layout is missing the HTML structure (html and body tags). While the comment indicates this is intentional for middleware redirects, Next.js requires a proper HTML structure in the root layout. The layout should return a complete HTML document structure even if it's only used briefly before redirection.
| returnchildren; | |
| return( | |
| <htmllang="en"> | |
| <body>{children}</body> | |
| </html> | |
| ); |
| import { redirect } from 'next/navigation'; | ||
| import type { ReactNode } from 'react'; | ||
| import type { Metadata } from 'next'; | ||
| import { i18n } from '@/lib/i18n'; |
There was a problem hiding this comment.
The unused import 'i18n' should be removed from this file. The i18n configuration is imported but never used in the root layout.
| import { i18n } from '@/lib/i18n'; |
| onlyBuiltDependencies: | ||
| - esbuild | ||
| - sharp |
There was a problem hiding this comment.
The pnpm-workspace.yaml change adding onlyBuiltDependencies for esbuild and sharp appears unrelated to the i18n feature. This configuration change should be in a separate PR or clearly documented in the PR description as it affects build behavior across the entire monorepo, not just the documentation site's i18n feature.
| onlyBuiltDependencies: | |
| - esbuild | |
| - sharp |
| children: ReactNode; | ||
| }) { | ||
| const { lang } = await params; |
There was a problem hiding this comment.
The language parameter from the URL is used directly without validation against the supported languages defined in i18n configuration. Consider validating that the lang parameter is one of the supported languages (['en', 'cn']) and redirecting to the default language if an invalid language is provided.
| params: Promise<{ lang: string }>; | ||
| children: ReactNode; | ||
| }) { | ||
| const { lang } = await params; |
There was a problem hiding this comment.
The language parameter from the URL is used directly without validation against the supported languages defined in i18n configuration. Consider validating that the lang parameter is one of the supported languages (['en', 'cn']) and redirecting to the default language if an invalid language is provided.
| */ | ||
| export const i18n = defineI18n({ | ||
| defaultLanguage: 'en', | ||
| languages: ['en', 'cn'], |
There was a problem hiding this comment.
The i18n configuration lacks documentation explaining the language codes used. Consider adding JSDoc comments to document that 'cn' refers to Chinese (Simplified) to avoid confusion with the ISO 639-1 standard code 'zh' or regional variants like 'zh-CN'.
| @@ -1,7 +1,8 @@ | |||
| import './global.css'; | |||
| import { RootProvider } from 'fumadocs-ui/provider/next'; | |||
| import { redirect } from 'next/navigation'; | |||
There was a problem hiding this comment.
The unused import 'redirect' should be removed from this file. The import is declared but never used since the root layout only returns children without performing any redirect logic.
| import { redirect } from 'next/navigation'; |
| export default async function Layout({ | ||
| params, | ||
| children, | ||
| }: { | ||
| params: Promise<{ lang: string }>; | ||
| children: ReactNode; | ||
| }) { | ||
| const { lang } = await params; | ||
| return ( | ||
| <DocsLayout tree={source.pageTree[lang]} {...baseOptions}> | ||
| {children} | ||
| </DocsLayout> | ||
| ); | ||
| } |
There was a problem hiding this comment.
The old docs layout included a generateMetadata function that is now missing in the new language-specific layout. This metadata (title template and description specific to the docs section) should be restored to maintain proper SEO and browser tab titles for documentation pages.
✅ i18n Support for Documentation Site
This PR implements internationalization (i18n) support for the ObjectStack documentation site, enabling automatic language detection and multi-language content delivery.
🎯 Features Implemented
en) set as defaultcn)/docsinstead of/en/docs).cn.mdx) translations🏗️ Architecture Changes
Configuration Files
apps/docs/lib/i18n.ts- i18n configuration with Fumadocsen['en', 'cn']hideLocale: 'default-locale'apps/docs/middleware.ts- Language detection and routing middlewareStructural Changes
Restructured App Directory - Moved routes under
[lang]dynamic segmentapp/[lang]/page.tsx- Homepage with language parameterapp/[lang]/docs/layout.tsx- Docs layout with language-specific page treeapp/[lang]/docs/[[...slug]]/page.tsx- Documentation pages with language routingUpdated Source Loader - Integrated i18n configuration with Fumadocs loader
📸 Screenshots
English Documentation (Default -
/docs)Chinese Documentation (
/cn/docs)🔄 URL Structure
/docs/.../docs/guides/getting-started/cn/docs/.../cn/docs/guides/getting-started✅ Testing
/docs(no language prefix)/cn/docs(with language prefix).cn.mdx) content renders correctly📝 Checklist
apps/docs/lib/i18n.ts)apps/docs/app/source.ts)apps/docs/middleware.ts)[lang]dynamic route for language support🚀 Next Steps
The i18n infrastructure is now in place. Future enhancements could include:
Translation Note: 文档站点现已支持配置默认语言(English)和语言清单(English/Chinese)，首页可根据用户的浏览器语言自动转向相应语言版本。
Original prompt
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.