Skip to content

Commit 74a348f

Browse files
xiaoyu2erxiaoyu2er
committed
feat: update home page
1 parent 77acb42 commit 74a348f

File tree

3 files changed

+208
-19
lines changed

3 files changed

+208
-19
lines changed

‎apps/docs/messages/en.json

Lines changed: 64 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,69 @@
2525
}
2626
},
2727
"HomePage": {
28-
"title": "Hello world!",
29-
"intro": "You can open <Link>/docs</Link> and see the documentation."
28+
"title": "The React Framework for the Web",
29+
"subtitle": "Used by some of the world's largest companies, Next.js enables you to create <strong>high-quality web applications</strong> with the power of React components.",
30+
"getStarted": "Get Started",
31+
"learn": "Learn Next.js",
32+
"copyCommand": "▲ ~ npx create-next-app@latest",
33+
"featuresTitle": "What's in Next.js?",
34+
"featuresSubtitle": "Everything you need to build great products on the web.",
35+
"features": [
36+
{
37+
"title": "Built-in Optimizations",
38+
"desc": "Automatic Image, Font, and Script Optimizations for improved UX and Core Web Vitals.",
39+
"href": "/docs/app/getting-started/images"
40+
},
41+
{
42+
"title": "Data Fetching",
43+
"desc": "Make your React component async and await your data. Next.js supports both server and client data fetching.",
44+
"href": "/docs/app/building-your-application/data-fetching"
45+
},
46+
{
47+
"title": "Server Actions",
48+
"desc": "Run server code by calling a function. Skip the API. Then, easily revalidate cached data and update your UI in one network roundtrip.",
49+
"href": "/docs/app/building-your-application/data-fetching/server-actions-and-mutations"
50+
},
51+
{
52+
"title": "Advanced Routing & Nested Layouts",
53+
"desc": "Create routes using the file system, including support for more advanced routing patterns and UI layouts.",
54+
"href": "/docs/app/building-your-application/routing"
55+
},
56+
{
57+
"title": "Dynamic HTML Streaming",
58+
"desc": "Instantly stream UI from the server, integrated with the App Router and React Suspense.",
59+
"href": "/docs/app/building-your-application/routing/loading-ui-and-streaming"
60+
},
61+
{
62+
"title": "CSS Support",
63+
"desc": "Style your application with your favorite tools, including support for CSS Modules, Tailwind CSS, and popular community libraries.",
64+
"href": "/app/getting-started/css"
65+
},
66+
{
67+
"title": "Route Handlers",
68+
"desc": "Build API endpoints to securely connect with third-party services for handling auth or listening for webhooks.",
69+
"href": "/docs/app/building-your-application/routing/route-handlers"
70+
},
71+
{
72+
"title": "Middleware",
73+
"desc": "Take control of the incoming request. Use code to define routing and access rules for authentication, experimentation, and internationalization.",
74+
"href": "/docs/app/building-your-application/routing/middleware"
75+
},
76+
{
77+
"title": "React Server Components",
78+
"desc": "Add components without sending additional client-side JavaScript. Built on the latest React features.",
79+
"href": "/docs/app/getting-started/server-and-client-components"
80+
},
81+
{
82+
"title": "Client and Server Rendering",
83+
"desc": "Flexible rendering and caching options, including Incremental Static Regeneration (ISR), on a per-page level.",
84+
"href": "/docs/app/getting-started/partial-prerendering"
85+
},
86+
{
87+
"title": "Next.js 15",
88+
"desc": "The power of full-stack to the frontend. Read the release notes.",
89+
"href": "https://nextjs.org/blog/next-15"
90+
}
91+
]
3092
}
3193
}

‎apps/docs/messages/zh-hans.json

Lines changed: 64 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,69 @@
2525
}
2626
},
2727
"HomePage": {
28-
"title": "你好，世界！",
29-
"intro": "你可以打开 <Link>/docs</Link> 来查看文档。"
28+
"title": "React 框架，面向 Web",
29+
"subtitle": "被全球领先企业采用，Next.js 让你可以用 React 组件的力量构建 <strong>高质量 Web 应用</strong>。",
30+
"getStarted": "快速开始",
31+
"learn": "学习 Next.js",
32+
"copyCommand": "▲ ~ npx create-next-app@latest",
33+
"featuresTitle": "Next.js 有什么？",
34+
"featuresSubtitle": "构建卓越 Web 产品所需的一切。",
35+
"features": [
36+
{
37+
"title": "内置优化",
38+
"desc": "自动图片、字体和脚本优化，提升用户体验和核心 Web 指标。",
39+
"href": "/docs/app/building-your-application/optimizing/images"
40+
},
41+
{
42+
"title": "数据获取",
43+
"desc": "让你的 React 组件支持 async/await。Next.js 支持服务端和客户端数据获取。",
44+
"href": "/docs/app/building-your-application/data-fetching"
45+
},
46+
{
47+
"title": "服务端操作",
48+
"desc": "通过调用函数直接运行服务端代码，无需 API。轻松重新验证缓存并在一次网络往返中更新 UI。",
49+
"href": "/docs/app/building-your-application/data-fetching/forms-and-mutations"
50+
},
51+
{
52+
"title": "高级路由与嵌套路由",
53+
"desc": "通过文件系统创建路由，支持更高级的路由模式和 UI 布局。",
54+
"href": "/docs/app/building-your-application/routing"
55+
},
56+
{
57+
"title": "动态 HTML 流式渲染",
58+
"desc": "从服务端即时流式渲染 UI，集成 App Router 和 React Suspense。",
59+
"href": "/docs/app/building-your-application/routing/loading-ui-and-streaming"
60+
},
61+
{
62+
"title": "CSS 支持",
63+
"desc": "用你喜欢的工具为应用添加样式，支持 CSS Modules、Tailwind CSS 及主流社区库。",
64+
"href": "/docs/app/building-your-application/styling"
65+
},
66+
{
67+
"title": "路由处理器",
68+
"desc": "构建 API 端点，安全连接第三方服务，处理认证或监听 Webhook。",
69+
"href": "/docs/app/building-your-application/routing/router-handlers"
70+
},
71+
{
72+
"title": "中间件",
73+
"desc": "灵活控制请求入口。用代码定义路由和访问规则，实现认证、实验和国际化。",
74+
"href": "/docs/app/building-your-application/routing/middleware"
75+
},
76+
{
77+
"title": "React 服务端组件",
78+
"desc": "无需发送额外客户端 JS 即可添加组件，基于最新 React 特性。",
79+
"href": "/docs/app/building-your-application/rendering/server-components"
80+
},
81+
{
82+
"title": "客户端与服务端渲染",
83+
"desc": "灵活的渲染与缓存选项，包括每页级别的 ISR（增量静态再生）。",
84+
"href": "/docs/app/building-your-application/rendering"
85+
},
86+
{
87+
"title": "Next.js 15",
88+
"desc": "全栈能力赋能前端。阅读发布说明。",
89+
"href": "/blog/next-15"
90+
}
91+
]
3092
}
3193
}

‎apps/docs/src/app/(home)/page.tsx

Lines changed: 80 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,93 @@ import Link from 'next/link';
44

55
export default function HomePage() {
66
const t = useTranslations('HomePage');
7+
const features = t.raw('features') as Array<{
8+
title: string;
9+
desc: string;
10+
href: string;
11+
}>;
12+
713
return (
8-
<main className="flex flex-1 flex-col justify-center text-center">
9-
<h1 className="mb-4 text-2xl font-bold">{t('title')}</h1>
10-
<p className="text-fd-muted-foreground">
11-
{t.rich('intro', {
12-
Link: (chunks) => (
13-
<Link
14-
href="/docs"
15-
className="text-fd-foreground font-semibold underline"
16-
>
17-
{chunks}
18-
</Link>
19-
),
20-
})}
21-
</p>
14+
<main className="flex flex-col items-center justify-center min-h-screen px-2">
15+
{/* Hero Section */}
16+
<section className="w-full flex flex-col items-center pt-20 pb-10 text-center relative overflow-hidden">
17+
{/* Decorative SVGs or backgrounds can be added here if needed */}
18+
<h1 className="text-4xl md:text-6xl font-extrabold mb-4 gradient-text">
19+
{t('title')}
20+
</h1>
21+
<div className="text-lg md:text-2xl text-gray-600 dark:text-gray-300 max-w-4xl mb-8">
22+
{t.rich('subtitle', {
23+
strong: (chunks) => (
24+
<strong className="font-semibold text-black dark:text-white">
25+
{chunks}
26+
</strong>
27+
),
28+
})}
29+
</div>
30+
<div className="flex flex-col sm:flex-row gap-4 justify-center mb-6">
31+
<Link
32+
href="/docs"
33+
className="px-6 py-3 rounded-lg bg-black text-white font-semibold text-lg shadow hover:bg-gray-900 transition"
34+
>
35+
{t('getStarted')}
36+
</Link>
37+
<Link
38+
href="https://nextjs.org/learn"
39+
target="_blank"
40+
className="px-6 py-3 rounded-lg bg-white border border-gray-300 dark:bg-gray-900 dark:border-gray-700 text-black dark:text-white font-semibold text-lg shadow hover:bg-gray-100 dark:hover:bg-gray-800 transition"
41+
>
42+
{t('learn')}
43+
</Link>
44+
</div>
45+
<button
46+
aria-label="Copy npx command for creating a new Next.js app"
47+
className="mt-2 px-4 py-2 bg-gray-100 dark:bg-gray-800 rounded text-sm font-mono text-gray-800 dark:text-gray-200 border border-gray-200 dark:border-gray-700 hover:bg-gray-200 dark:hover:bg-gray-700 transition"
48+
type="button"
49+
// onClick={() => navigator.clipboard.writeText('npx create-next-app@latest')}
50+
>
51+
{t('copyCommand')}
52+
</button>
53+
</section>
54+
55+
{/* Features Section */}
56+
<section className="w-full max-w-5xl px-2 py-12">
57+
<div className="flex flex-col md:flex-row md:items-end md:justify-between mb-10 gap-2">
58+
<h2 className="text-3xl md:text-4xl font-bold gradient-text">
59+
{t('featuresTitle')}
60+
</h2>
61+
<p className="text-lg text-gray-500 dark:text-gray-400">
62+
{t('featuresSubtitle')}
63+
</p>
64+
</div>
65+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
66+
{features.map(
67+
(
68+
feature: { title: string; desc: string; href: string },
69+
i: number,
70+
) => (
71+
<Link
72+
key={feature.title}
73+
href={feature.href}
74+
target={feature.href.startsWith('/') ? '_self' : '_blank'}
75+
className="block p-6 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow hover:shadow-lg transition group"
76+
>
77+
<div className="text-xl font-semibold mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition">
78+
{feature.title}
79+
</div>
80+
<div className="text-gray-600 dark:text-gray-300 text-base">
81+
{feature.desc}
82+
</div>
83+
</Link>
84+
),
85+
)}
86+
</div>
87+
</section>
2288
</main>
2389
);
2490
}
2591

2692
export async function generateMetadata() {
2793
const t = await getTranslations('HomePage');
28-
2994
return {
3095
title: t('title'),
3196
};

0 commit comments

Comments
 (0)