{"id":55763,"date":"2025-02-19T17:02:58","date_gmt":"2025-02-19T09:02:58","guid":{"rendered":"https:\/\/fwq.ai\/blog\/55763\/"},"modified":"2025-02-19T17:02:58","modified_gmt":"2025-02-19T09:02:58","slug":"%e5%bc%95%e5%85%a5%e6%88%90%e7%86%9f%e5%bc%80%e5%8f%91%e7%bb%8f%e9%aa%8c%e4%bd%9c%e4%b8%baai%e7%94%9f%e6%88%90%e5%89%8d%e7%ab%af%e4%bb%a3%e7%a0%81%e8%a7%84%e5%88%99%ef%bc%9anext-js-14-%e5%bc%80","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/55763\/","title":{"rendered":"\u5f15\u5165\u6210\u719f\u5f00\u53d1\u7ecf\u9a8c\u4f5c\u4e3aAI\u751f\u6210\u524d\u7aef\u4ee3\u7801\u89c4\u5219\uff1aNext.js 14 \u5f00\u53d1\u63d0\u793a\u8bcd\u3001Swift\u4e0eSwiftUI\u5f00\u53d1\u63d0\u793a\u8bcd"},"content":{"rendered":"<p>\u9002\u5408\u4f5c\u4e3a  \u3001Windsurf \u3001Cline \u7b49AI IDE \u5de5\u5177\u89c4\u8303\u5316\u751f\u6210\u524d\u7aef\u9879\u76ee\u4ee3\u7801\u3002\u8fd9\u7c7b\u5de5\u5177\u867d\u7136<strong>\u751f\u6210\u5b8c\u6574\u9879\u76ee\u4ee3\u7801<\/strong>\u80fd\u529b\u5341\u5206\u5f3a\u5927\uff0c\u4f46\u7f3a\u4e4f\u57fa\u672c\u7ea6\u675f\u4f1a\u5bfc\u81f4\u5927\u91cf\u65e0\u6548\u7684tokens\u6d88\u8017\uff0c\u7279\u522b\u662f\u751f\u6210\u524d\u7aef\u9879\u76ee\u65f6\uff0c\u56e0\u4e3a\u6ca1\u6709\u7ea6\u675f\u57fa\u672c\u5f00\u53d1\u6846\u67b6\uff0c\u9ed8\u8ba4\u7684\u524d\u7aef\u9875\u9762\u751f\u6210\u6548\u679c\u4f4e\u4e8e&nbsp;&nbsp;\u3001&nbsp;\u4e00\u7c7b\u7684\u5de5\u5177\u3002<\/p>\n<p>\u6b64\u65f6\u5f15\u5165\u6210\u719f\u7684\u6280\u672f\u6846\u67b6\u548c\u57fa\u672c\u7ea6\u675f\uff0c\u53ef\u4ee5\u5728\u8f83\u5c11\u6b65\u9aa4\u548ctokens\u6d88\u8017\u524d\u63d0\u4e0b\u66f4\u597d\u7684\u751f\u6210\u524d\u7aef\u9879\u76ee\u4ee3\u7801\u3002<\/p>\n<p> <\/p>\n<p>&nbsp;<\/p>\n<p><strong>Next.js 14 \u5f00\u53d1\u89c4\u5219\u539f\u6587<\/strong><\/p>\n<pre># Rules for Next.js 14 Development\r\n\n## General Guidelines\r\n\n1. Use Next.js 14 with TypeScript and Tailwind CSS for optimal developer experience and type safety.\r\n2. Use `bun` for all package installations and management.\r\n3. Implement the App Router, which is the recommended routing system for Next.js 14.\r\n4. Utilize Server Components by default, using Client Components only when necessary for interactivity or client-side state.\r\n5. Leverage Server Actions for handling data mutations and form submissions.\r\n6. Implement proper caching strategies using Next.js built-in caching mechanisms.\r\n7. Ensure all components and pages are accessible, following WCAG guidelines.\r\n8. Use environment variables for configuration following Next.js conventions.\r\n9. Implement performance optimizations such as code splitting, lazy loading, and parallel data fetching where appropriate.\r\n10. Provide clear, concise comments explaining complex logic or design decisions.\r\n\n## Code Structure and Syntax\r\n\n1. Use the `app` directory for all components and pages.\r\n2. Implement the following file conventions in the `app` directory:\r\n- `layout.tsx`: For shared UI across multiple pages\r\n- `page.tsx`: For unique page content\r\n- `loading.tsx`: For loading UI\r\n- `error.tsx`: For error handling UI\r\n- `not-found.tsx`: For 404 pages\r\n3. Use Server Components by default. Add the `'use client'` directive only when creating Client Components.\r\n4. Define components using arrow function syntax with TypeScript:\r\n\n```tsx\r\nimport { FC } from 'react';\r\n\ninterface ComponentProps {\r\n\/\/ Props definition\r\n}\r\n\nconst Component: FC&lt;ComponentProps&gt; = ({ prop1, prop2 }) =&gt; {\r\n\/\/ Component logic\r\n};\r\n\nexport default Component;\r\n\n```\r\n\n5. For page components, use default exports:\r\n\n```tsx\r\nexport default function Page() {\r\n\/\/ Page component logic\r\n}\r\n\n```\r\n\n6. If explicit typing is needed, prefer `React.FC` or `React.ReactNode`:\r\n\n```tsx\r\nimport  from 'react';\r\n\nconst ComponentName: React.FC = () =&gt; {\r\n\/\/ Component logic\r\n};\r\n\n\/\/ OR\r\n\nconst ComponentName = (): React.ReactNode =&gt; {\r\n\/\/ Component logic\r\n};\r\n\n```\r\n\n## Routing and Navigation\r\n\n1. Implement nested routing using folder structure in the `app` directory.\r\n2. Use the `&lt;Link&gt;` component from `next\/link` for client-side navigation:\r\n\n```tsx\r\nimport Link from 'next\/link';\r\n\n&lt;Link href=\"\/about\"&gt;About&lt;\/Link&gt;\r\n\n```\r\n\n3. Implement dynamic routes using folder names with square brackets (e.g., `[id]`).\r\n4. Use `generateStaticParams` for generating static paths in dynamic routes.\r\n\n## Data Fetching and API Routes\r\n\n1. Use Server Components and the `fetch` API for data fetching, leveraging Next.js automatic request deduplication:\r\n\n```tsx\r\nasync function getData() {\r\nconst res = await fetch('&lt;https:\/\/api.example.com\/data&gt;', { next: { revalidate: 3600 } });\r\nif (!res.ok) throw new Error('Failed to fetch data');\r\nreturn res.json();\r\n}\r\n\nexport default async function Page() {\r\nconst data = await getData();\r\n\/\/ Render component using data\r\n}\r\n\n```\r\n\n2. Implement Server Actions for data mutations:\r\n\n```tsx\r\n'use server';\r\n\nimport { revalidatePath } from 'next\/cache';\r\n\nexport async function updateData(formData: FormData) {\r\n\/\/ Update data in your database\r\nrevalidatePath('\/data');\r\n}\r\n\n```\r\n\n3. Use route handlers (route.ts) for API routes in the App Router.\r\n4. Implement Static Site Generation (SSG) and Server-Side Rendering (SSR) using App Router conventions when appropriate.\r\n\n## State Management and Interactivity\r\n\n1. Use Server Actions for form submissions and data mutations:\r\n\n```tsx\r\nimport { updateData } from '.\/actions';\r\n\nexport default function Form() {\r\nreturn (\r\n&lt;form action={updateData}&gt;\r\n&lt;input type=\"text\" name=\"data\" \/&gt;\r\n&lt;button type=\"submit\"&gt;Update&lt;\/button&gt;\r\n&lt;\/form&gt;\r\n);\r\n}\r\n\n```\r\n\n2. Implement React hooks for client-side state management when necessary.\r\n3. Use the `useState` and `useEffect` hooks in Client Components for local state and side effects.\r\n\n## Styling\r\n\n1. Use Tailwind CSS classes exclusively for styling. Avoid inline styles:\r\n\n```tsx\r\n&lt;div className=\"bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4\"&gt;\r\n{\/* Component content *\/}\r\n&lt;\/div&gt;\r\n\n```\r\n\n2. Create custom Tailwind classes in the `tailwind.config.js` file for reusable styles.\r\n3. Use CSS Modules for component-specific styles when needed.\r\n\n## Performance Optimization\r\n\n1. Implement automatic static optimization for eligible pages.\r\n2. Use dynamic imports for code splitting:\r\n\n```tsx\r\nimport dynamic from 'next\/dynamic';\r\n\nconst DynamicComponent = dynamic(() =&gt; import('..\/components\/DynamicComponent'));\r\n\n```\r\n\n3. Utilize the Image component from `next\/image` for automatic image optimization:\r\n\n```tsx\r\nimport Image from 'next\/image';\r\n\n&lt;Image src=\"\/image.jpg\" alt=\"Description\" width={500} height={300} \/&gt;\r\n\n```\r\n\n4. Implement proper caching strategies using the Data Cache and Full Route Cache.\r\n5. Use Next.js 14's built-in caching and revalidation features for optimal performance:\r\n\n```tsx\r\nimport { unstable_cache } from 'next\/cache';\r\n\nconst getCachedUser = unstable_cache(\r\nasync (id: string) =&gt; getUser(id),\r\n['user-cache'],\r\n{ revalidate: 3600 } \/\/ Revalidate every hour\r\n);\r\n\n```\r\n\n6. Use on-demand revalidation when appropriate:\r\n\n```tsx\r\nimport { revalidatePath, revalidateTag } from 'next\/cache';\r\n\nexport async function updateData() {\r\n\/\/ Update data in your database\r\nrevalidatePath('\/data'); \/\/ Revalidate a specific path\r\nrevalidateTag('data-tag'); \/\/ Revalidate all entries with this tag\r\n}\r\n\n```\r\n\n7. Implement parallel data fetching for improved performance:\r\n\n```tsx\r\nasync function ParallelDataFetch() {\r\nconst dataPromise = fetch('&lt;https:\/\/api.example.com\/data&gt;');\r\nconst userPromise = fetch('&lt;https:\/\/api.example.com\/user&gt;');\r\n\nconst [data, user] = await Promise.all([\r\ndataPromise.then(res =&gt; res.json()),\r\nuserPromise.then(res =&gt; res.json())\r\n]);\r\n\nreturn { data, user };\r\n}\r\n\n```\r\n\n## Error Handling and Loading States\r\n\n1. Create error.tsx files for error boundaries:\r\n\n```tsx\r\n'use client';\r\n\nexport default function Error({\r\nerror,\r\nreset,\r\n}: {\r\nerror: Error &amp; { digest?: string };\r\nreset: () =&gt; void;\r\n}) {\r\nreturn (\r\n&lt;div&gt;\r\n&lt;h2&gt;Something went wrong!&lt;\/h2&gt;\r\n&lt;button onClick={() =&gt; reset()}&gt;Try again&lt;\/button&gt;\r\n&lt;\/div&gt;\r\n);\r\n}\r\n\n```\r\n\n2. Implement loading.tsx files for managing loading states.\r\n3. Use React Suspense for more granular loading states:\r\n\n```tsx\r\nimport { Suspense } from 'react';\r\n\nexport default function Page() {\r\nreturn (\r\n&lt;Suspense fallback={&lt;Loading \/&gt;}&gt;\r\n&lt;SomeComponent \/&gt;\r\n&lt;\/Suspense&gt;\r\n);\r\n}\r\n\n```\r\n\n## SEO and Metadata\r\n\n1. Use the Metadata API for SEO optimization:\r\n\n```tsx\r\nimport type { Metadata } from 'next';\r\n\nexport const metadata: Metadata = {\r\ntitle: 'Page Title',\r\ndescription: 'Page description',\r\n};\r\n\n```\r\n\n2. Implement dynamic metadata using generateMetadata for pages with dynamic content.\r\n\n## Composer Mode-Specific Guidelines\r\n\n1. When using Composer mode, provide clear, natural language descriptions of desired changes or additions.\r\n2. For multi-file operations, specify the files involved and their relationships.\r\n3. When requesting code generation, provide context about the desired functionality and how it fits into the existing project structure.\r\n4. For refactoring tasks, describe the current code structure and the desired outcome.\r\n5. When addressing errors, provide details about the error message and the surrounding code context.\r\n\nRemember to adapt these rules based on specific project requirements and personal preferences. Always prioritize clean, efficient, and maintainable code that adheres to Next.js 14 best practices.<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Next.js 14 \u5f00\u53d1\u89c4\u5219\u8bd1\u6587<\/strong><\/p>\n<pre># Next.js 14 \u5f00\u53d1\u89c4\u5219\r\n\n## \u901a\u7528\u6307\u5357\r\n\n1. \u4f7f\u7528 Next.js 14 \u642d\u914d TypeScript \u548c Tailwind CSS\uff0c\u4ee5\u83b7\u5f97\u6700\u4f73\u7684\u5f00\u53d1\u4f53\u9a8c\u548c\u7c7b\u578b\u5b89\u5168\u6027\u3002\r\n2. \u4f7f\u7528 `bun` \u8fdb\u884c\u6240\u6709\u5305\u7684\u5b89\u88c5\u548c\u7ba1\u7406\u3002\r\n3. \u5b9e\u73b0 App Router\uff0c\u8fd9\u662f Next.js 14 \u63a8\u8350\u7684\u8def\u7531\u7cfb\u7edf\u3002\r\n4. \u9ed8\u8ba4\u4f7f\u7528\u670d\u52a1\u7aef\u7ec4\u4ef6\uff08Server Components\uff09\uff0c\u4ec5\u5728\u9700\u8981\u4ea4\u4e92\u6216\u5ba2\u6237\u7aef\u72b6\u6001\u65f6\u4f7f\u7528\u5ba2\u6237\u7aef\u7ec4\u4ef6\uff08Client Components\uff09\u3002\r\n5. \u5229\u7528\u670d\u52a1\u7aef\u64cd\u4f5c\uff08Server Actions\uff09\u5904\u7406\u6570\u636e\u53d8\u66f4\u548c\u8868\u5355\u63d0\u4ea4\u3002\r\n6. \u4f7f\u7528 Next.js \u5185\u7f6e\u7684\u7f13\u5b58\u673a\u5236\u5b9e\u65bd\u5408\u9002\u7684\u7f13\u5b58\u7b56\u7565\u3002\r\n7. \u786e\u4fdd\u6240\u6709\u7ec4\u4ef6\u548c\u9875\u9762\u7b26\u5408 WCAG \u6307\u5357\u7684\u53ef\u8bbf\u95ee\u6027\u6807\u51c6\u3002\r\n8. \u9075\u5faa Next.js \u7684\u60ef\u4f8b\u4f7f\u7528\u73af\u5883\u53d8\u91cf\u8fdb\u884c\u914d\u7f6e\u3002\r\n9. \u5b9e\u73b0\u6027\u80fd\u4f18\u5316\uff0c\u4f8b\u5982\u4ee3\u7801\u5206\u5272\u3001\u61d2\u52a0\u8f7d\u548c\u5e76\u884c\u6570\u636e\u83b7\u53d6\u3002\r\n10. \u4e3a\u590d\u6742\u903b\u8f91\u6216\u8bbe\u8ba1\u51b3\u7b56\u63d0\u4f9b\u6e05\u6670\u7b80\u6d01\u7684\u6ce8\u91ca\u3002\r\n\n## \u4ee3\u7801\u7ed3\u6784\u4e0e\u8bed\u6cd5\r\n\n1. \u4f7f\u7528 `app` \u76ee\u5f55\u5b58\u653e\u6240\u6709\u7ec4\u4ef6\u548c\u9875\u9762\u3002\r\n2. \u5728 `app` \u76ee\u5f55\u4e2d\u9075\u5faa\u4ee5\u4e0b\u6587\u4ef6\u547d\u540d\u7ea6\u5b9a\uff1a\r\n- `layout.tsx`\uff1a\u7528\u4e8e\u591a\u4e2a\u9875\u9762\u5171\u4eab\u7684 UI\r\n- `page.tsx`\uff1a\u7528\u4e8e\u72ec\u7279\u9875\u9762\u5185\u5bb9\r\n- `loading.tsx`\uff1a\u7528\u4e8e\u52a0\u8f7d\u4e2d\u7684 UI\r\n- `error.tsx`\uff1a\u7528\u4e8e\u9519\u8bef\u5904\u7406\u7684 UI\r\n- `not-found.tsx`\uff1a\u7528\u4e8e 404 \u9875\u9762\r\n3. \u9ed8\u8ba4\u4f7f\u7528\u670d\u52a1\u7aef\u7ec4\u4ef6\u3002\u4ec5\u5728\u521b\u5efa\u5ba2\u6237\u7aef\u7ec4\u4ef6\u65f6\u6dfb\u52a0 `'use client'` \u6307\u4ee4\u3002\r\n4. \u4f7f\u7528 TypeScript \u7684\u7bad\u5934\u51fd\u6570\u8bed\u6cd5\u5b9a\u4e49\u7ec4\u4ef6\uff1a\r\n\n```tsx\r\nimport { FC } from 'react';\r\n\ninterface ComponentProps {\r\n\/\/ \u5c5e\u6027\u5b9a\u4e49\r\n}\r\n\nconst Component: FC&lt;ComponentProps&gt; = ({ prop1, prop2 }) =&gt; {\r\n\/\/ \u7ec4\u4ef6\u903b\u8f91\r\n};\r\n\nexport default Component;\r\n```\r\n\n5. \u5bf9\u4e8e\u9875\u9762\u7ec4\u4ef6\uff0c\u4f7f\u7528\u9ed8\u8ba4\u5bfc\u51fa\uff1a\r\n\n```tsx\r\nexport default function Page() {\r\n\/\/ \u9875\u9762\u7ec4\u4ef6\u903b\u8f91\r\n}\r\n```\r\n\n6. \u5982\u679c\u9700\u8981\u663e\u5f0f\u7c7b\u578b\uff0c\u4f18\u5148\u4f7f\u7528 `React.FC` \u6216 `React.ReactNode`\uff1a\r\n\n```tsx\r\nimport React from 'react';\r\n\nconst ComponentName: React.FC = () =&gt; {\r\n\/\/ \u7ec4\u4ef6\u903b\u8f91\r\n};\r\n\n\/\/ \u6216\r\n\nconst ComponentName = (): React.ReactNode =&gt; {\r\n\/\/ \u7ec4\u4ef6\u903b\u8f91\r\n};\r\n```\r\n\n## \u8def\u7531\u4e0e\u5bfc\u822a\r\n\n1. \u5728 `app` \u76ee\u5f55\u4e2d\u901a\u8fc7\u6587\u4ef6\u5939\u7ed3\u6784\u5b9e\u73b0\u5d4c\u5957\u8def\u7531\u3002\r\n2. \u4f7f\u7528 `next\/link` \u63d0\u4f9b\u7684 `&lt;Link&gt;` \u7ec4\u4ef6\u8fdb\u884c\u5ba2\u6237\u7aef\u5bfc\u822a\uff1a\r\n\n```tsx\r\nimport Link from 'next\/link';\r\n\n&lt;Link href=\"\/about\"&gt;\u5173\u4e8e\u6211\u4eec&lt;\/Link&gt;\r\n```\r\n\n3. \u4f7f\u7528\u5e26\u6709\u65b9\u62ec\u53f7\u7684\u6587\u4ef6\u5939\u540d\u79f0\uff08\u5982 `[id]`\uff09\u5b9e\u73b0\u52a8\u6001\u8def\u7531\u3002\r\n4. \u4f7f\u7528 `generateStaticParams` \u751f\u6210\u52a8\u6001\u8def\u7531\u7684\u9759\u6001\u8def\u5f84\u3002\r\n\n## \u6570\u636e\u83b7\u53d6\u4e0e API \u8def\u7531\r\n\n1. \u4f7f\u7528\u670d\u52a1\u7aef\u7ec4\u4ef6\u548c `fetch` API \u83b7\u53d6\u6570\u636e\uff0c\u5229\u7528 Next.js \u7684\u81ea\u52a8\u8bf7\u6c42\u53bb\u91cd\u529f\u80fd\uff1a\r\n\n```tsx\r\nasync function getData() {\r\nconst res = await fetch('&lt;https:\/\/api.example.com\/data&gt;', { next: { revalidate: 3600 } });\r\nif (!res.ok) throw new Error('\u6570\u636e\u83b7\u53d6\u5931\u8d25');\r\nreturn res.json();\r\n}\r\n\nexport default async function Page() {\r\nconst data = await getData();\r\n\/\/ \u4f7f\u7528\u6570\u636e\u6e32\u67d3\u7ec4\u4ef6\r\n}\r\n```\r\n\n2. \u4f7f\u7528\u670d\u52a1\u7aef\u64cd\u4f5c\u5904\u7406\u6570\u636e\u53d8\u66f4\uff1a\r\n\n```tsx\r\n'use server';\r\n\nimport { revalidatePath } from 'next\/cache';\r\n\nexport async function updateData(formData: FormData) {\r\n\/\/ \u66f4\u65b0\u6570\u636e\u5e93\u4e2d\u7684\u6570\u636e\r\nrevalidatePath('\/data');\r\n}\r\n```\r\n\n3. \u5728 App Router \u4e2d\u4f7f\u7528\u8def\u7531\u5904\u7406\u7a0b\u5e8f\uff08route.ts\uff09\u5b9e\u73b0 API \u8def\u7531\u3002\r\n4. \u5728\u9002\u5f53\u60c5\u51b5\u4e0b\u4f7f\u7528 App Router \u7ea6\u5b9a\u5b9e\u73b0\u9759\u6001\u7ad9\u70b9\u751f\u6210\uff08SSG\uff09\u548c\u670d\u52a1\u7aef\u6e32\u67d3\uff08SSR\uff09\u3002\r\n\n## \u72b6\u6001\u7ba1\u7406\u4e0e\u4ea4\u4e92\r\n\n1. \u4f7f\u7528\u670d\u52a1\u7aef\u64cd\u4f5c\u5904\u7406\u8868\u5355\u63d0\u4ea4\u548c\u6570\u636e\u53d8\u66f4\uff1a\r\n\n```tsx\r\nimport { updateData } from '.\/actions';\r\n\nexport default function Form() {\r\nreturn (\r\n&lt;form action={updateData}&gt;\r\n&lt;input type=\"text\" name=\"data\" \/&gt;\r\n&lt;button type=\"submit\"&gt;\u66f4\u65b0&lt;\/button&gt;\r\n&lt;\/form&gt;\r\n);\r\n}\r\n```\r\n\n2. \u5728\u9700\u8981\u65f6\u4f7f\u7528 React \u94a9\u5b50\u8fdb\u884c\u5ba2\u6237\u7aef\u72b6\u6001\u7ba1\u7406\u3002\r\n3. \u5728\u5ba2\u6237\u7aef\u7ec4\u4ef6\u4e2d\u4f7f\u7528 `useState` \u548c `useEffect` \u94a9\u5b50\u7ba1\u7406\u672c\u5730\u72b6\u6001\u548c\u526f\u4f5c\u7528\u3002\r\n\n## \u6837\u5f0f\r\n\n1. \u4f7f\u7528 Tailwind CSS \u7c7b\u8fdb\u884c\u6837\u5f0f\u8bbe\u7f6e\uff0c\u907f\u514d\u4f7f\u7528\u5185\u8054\u6837\u5f0f\uff1a\r\n\n```tsx\r\n&lt;div className=\"bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4\"&gt;\r\n{\/* \u7ec4\u4ef6\u5185\u5bb9 *\/}\r\n&lt;\/div&gt;\r\n```\r\n\n2. \u5728 `tailwind.config.js` \u6587\u4ef6\u4e2d\u521b\u5efa\u81ea\u5b9a\u4e49 Tailwind \u7c7b\u4ee5\u5b9e\u73b0\u53ef\u590d\u7528\u6837\u5f0f\u3002\r\n3. \u5728\u9700\u8981\u65f6\u4f7f\u7528 CSS \u6a21\u5757\u4e3a\u7279\u5b9a\u7ec4\u4ef6\u8bbe\u7f6e\u6837\u5f0f\u3002\r\n\n## \u6027\u80fd\u4f18\u5316\r\n\n1. \u5bf9\u7b26\u5408\u6761\u4ef6\u7684\u9875\u9762\u5b9e\u73b0\u81ea\u52a8\u9759\u6001\u4f18\u5316\u3002\r\n2. \u4f7f\u7528\u52a8\u6001\u5bfc\u5165\u5b9e\u73b0\u4ee3\u7801\u5206\u5272\uff1a\r\n\n```tsx\r\nimport dynamic from 'next\/dynamic';\r\n\nconst DynamicComponent = dynamic(() =&gt; import('..\/components\/DynamicComponent'));\r\n```\r\n\n3. \u4f7f\u7528 `next\/image` \u7684 Image \u7ec4\u4ef6\u5b9e\u73b0\u81ea\u52a8\u56fe\u50cf\u4f18\u5316\uff1a\r\n\n```tsx\r\nimport Image from 'next\/image';\r\n\n&lt;Image src=\"\/image.jpg\" alt=\"\u63cf\u8ff0\" width={500} height={300} \/&gt;\r\n```\r\n\n4. \u4f7f\u7528\u6570\u636e\u7f13\u5b58\u548c\u5b8c\u6574\u8def\u7531\u7f13\u5b58\u5b9e\u73b0\u5408\u9002\u7684\u7f13\u5b58\u7b56\u7565\u3002\r\n5. \u4f7f\u7528 Next.js 14 \u5185\u7f6e\u7684\u7f13\u5b58\u548c\u91cd\u65b0\u9a8c\u8bc1\u529f\u80fd\u63d0\u5347\u6027\u80fd\uff1a\r\n\n```tsx\r\nimport { unstable_cache } from 'next\/cache';\r\n\nconst getCachedUser = unstable_cache(\r\nasync (id: string) =&gt; getUser(id),\r\n['user-cache'],\r\n{ revalidate: 3600 } \/\/ \u6bcf\u5c0f\u65f6\u91cd\u65b0\u9a8c\u8bc1\r\n);\r\n```\r\n\n6. \u5728\u9002\u5f53\u60c5\u51b5\u4e0b\u4f7f\u7528\u6309\u9700\u91cd\u65b0\u9a8c\u8bc1\uff1a\r\n\n```tsx\r\nimport { revalidatePath, revalidateTag } from 'next\/cache';\r\n\nexport async function updateData() {\r\n\/\/ \u66f4\u65b0\u6570\u636e\u5e93\u4e2d\u7684\u6570\u636e\r\nrevalidatePath('\/data'); \/\/ \u91cd\u65b0\u9a8c\u8bc1\u7279\u5b9a\u8def\u5f84\r\nrevalidateTag('data-tag'); \/\/ \u91cd\u65b0\u9a8c\u8bc1\u6240\u6709\u5e26\u6b64\u6807\u7b7e\u7684\u6761\u76ee\r\n}\r\n```\r\n\n7. \u5b9e\u73b0\u5e76\u884c\u6570\u636e\u83b7\u53d6\u4ee5\u63d0\u9ad8\u6027\u80fd\uff1a\r\n\n```tsx\r\nasync function ParallelDataFetch() {\r\nconst dataPromise = fetch('&lt;https:\/\/api.example.com\/data&gt;');\r\nconst userPromise = fetch('&lt;https:\/\/api.example.com\/user&gt;');\r\n\nconst [data, user] = await Promise.all([\r\ndataPromise.then(res =&gt; res.json()),\r\nuserPromise.then(res =&gt; res.json())\r\n]);\r\n\nreturn { data, user };\r\n}\r\n```\r\n\n## \u9519\u8bef\u5904\u7406\u4e0e\u52a0\u8f7d\u72b6\u6001\r\n\n1. \u521b\u5efa error.tsx \u6587\u4ef6\u4f5c\u4e3a\u9519\u8bef\u8fb9\u754c\uff1a\r\n\n```tsx\r\n'use client';\r\n\nexport default function Error({\r\nerror,\r\nreset,\r\n}: {\r\nerror: Error &amp; { digest?: string };\r\nreset: () =&gt; void;\r\n}) {\r\nreturn (\r\n&lt;div&gt;\r\n&lt;h2&gt;\u53d1\u751f\u9519\u8bef\uff01&lt;\/h2&gt;\r\n&lt;button onClick={() =&gt; reset()}&gt;\u91cd\u8bd5&lt;\/button&gt;\r\n&lt;\/div&gt;\r\n);\r\n}\r\n```\r\n\n2. \u521b\u5efa loading.tsx \u6587\u4ef6\u7ba1\u7406\u52a0\u8f7d\u72b6\u6001\u3002\r\n3. \u4f7f\u7528 React Suspense \u63d0\u4f9b\u66f4\u7ec6\u7c92\u5ea6\u7684\u52a0\u8f7d\u72b6\u6001\uff1a\r\n\n```tsx\r\nimport { Suspense } from 'react';\r\n\nexport default function Page() {\r\nreturn (\r\n&lt;Suspense fallback={&lt;Loading \/&gt;}&gt;\r\n&lt;SomeComponent \/&gt;\r\n&lt;\/Suspense&gt;\r\n);\r\n}\r\n```\r\n\n## SEO \u4e0e\u5143\u6570\u636e\r\n\n1. \u4f7f\u7528 Metadata API \u8fdb\u884c SEO \u4f18\u5316\uff1a\r\n\n```tsx\r\nimport type { Metadata } from 'next';\r\n\nexport const metadata: Metadata = {\r\ntitle: '\u9875\u9762\u6807\u9898',\r\ndescription: '\u9875\u9762\u63cf\u8ff0',\r\n};\r\n```\r\n\n2. \u5bf9\u4e8e\u52a8\u6001\u5185\u5bb9\u9875\u9762\uff0c\u4f7f\u7528 generateMetadata \u5b9e\u73b0\u52a8\u6001\u5143\u6570\u636e\u3002\r\n\n## Composer \u6a21\u5f0f\u7279\u5b9a\u6307\u5357\r\n\n1. \u5728\u4f7f\u7528 Composer \u6a21\u5f0f\u65f6\uff0c\u63d0\u4f9b\u6e05\u6670\u3001\u81ea\u7136\u7684\u8bed\u8a00\u63cf\u8ff0\u6240\u9700\u7684\u66f4\u6539\u6216\u65b0\u589e\u5185\u5bb9\u3002\r\n2. \u5bf9\u4e8e\u591a\u6587\u4ef6\u64cd\u4f5c\uff0c\u660e\u786e\u6d89\u53ca\u7684\u6587\u4ef6\u53ca\u5176\u5173\u7cfb\u3002\r\n3. \u5728\u8bf7\u6c42\u4ee3\u7801\u751f\u6210\u65f6\uff0c\u63d0\u4f9b\u5173\u4e8e\u6240\u9700\u529f\u80fd\u53ca\u5176\u5728\u73b0\u6709\u9879\u76ee\u7ed3\u6784\u4e2d\u9002\u914d\u65b9\u5f0f\u7684\u4e0a\u4e0b\u6587\u3002\r\n4. \u5bf9\u4e8e\u91cd\u6784\u4efb\u52a1\uff0c\u63cf\u8ff0\u5f53\u524d\u4ee3\u7801\u7ed3\u6784\u548c\u671f\u671b\u7ed3\u679c\u3002\r\n5. \u5728\u89e3\u51b3\u9519\u8bef\u65f6\uff0c\u63d0\u4f9b\u6709\u5173\u9519\u8bef\u4fe1\u606f\u53ca\u5176\u4e0a\u4e0b\u6587\u7684\u8be6\u7ec6\u4fe1\u606f\u3002\r\n\n\u8bb0\u4f4f\uff0c\u6839\u636e\u5177\u4f53\u9879\u76ee\u9700\u6c42\u548c\u4e2a\u4eba\u504f\u597d\u8c03\u6574\u8fd9\u4e9b\u89c4\u5219\u3002\u59cb\u7ec8\u4f18\u5148\u7f16\u5199\u7b26\u5408 Next.js 14 \u6700\u4f73\u5b9e\u8df5\u7684\u6e05\u6670\u3001\u9ad8\u6548\u548c\u53ef\u7ef4\u62a4\u7684\u4ee3\u7801\u3002<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Swift \u4e0e SwiftUI \u5f00\u53d1\u89c4\u5219\u539f\u6587<\/strong><\/p>\n<pre># SwiftUI Best Practices for iOS App Development\r\n\nWhen generating code, finding bugs, or optimizing SwiftUI projects, follow these guidelines:\r\n\n## General Guidelines\r\n\n- You are an expert AI programming assistant focused on producing clear, readable SwiftUI code.\r\n- Always use the latest version of SwiftUI and Swift (as of August\/September 2024), and be familiar with the latest features and best practices.\r\n- Provide accurate, factual, thoughtful answers, and excel at reasoning.\r\n- Follow the user's requirements carefully &amp; to the letter.\r\n- Think step-by-step - describe your plan for what to build in pseudocode, written out in great detail.\r\n- Always confirm your understanding before writing code.\r\n- Write correct, up-to-date, bug-free, fully functional, working, secure, performant, and efficient code.\r\n- Prioritize readability over performance.\r\n- Fully implement all requested functionality.\r\n- Leave NO TODOs, placeholders, or missing .\r\n- Be concise. Minimize any other prose.\r\n- If you think there might not be a correct answer, say so. If you do not know the\r\n\n## 1. State Management\r\n\n- Use appropriate property wrappers and macros:\r\n- Annotate view models with `@Observable`, e.g. `@Observable final class MyModel`.\r\n- Do not use @State in the SwiftUI View for view model observation. Instead, use `let model: MyModel`.\r\n- For reference type state shared with a child view, pass the dependency to the constructor of the child view.\r\n- For value type state shared with a child view, use SwiftUI bindings if and only if the child needs write access to the state.\r\n- For value type state shared with a child view, pass the value if the child view only needs read access to the state.\r\n- Use an `@Environment` for state that should be shared throughout the entire app, or large pieces of the app.\r\n- Use `@State` only for local state that is managed by the view itself.\r\n\n## 2. Performance Optimization\r\n\n- Implement lazy loading for large lists or grids using `LazyVStack`, `LazyHStack`, or `LazyVGrid`.\r\n- Optimize ForEach loops by using stable identifiers.\r\n\n## 3. Reusable Components\r\n\n- Implement custom view modifiers for shared styling and behavior.\r\n- Use extensions to add reusable functionality to existing types.\r\n\n## 4. Accessibility\r\n\n- Add accessibility modifiers to all UI elements.\r\n- Support Dynamic Type for text scaling.\r\n- Provide clear accessibility labels and hints.\r\n\n## 5. SwiftUI Lifecycle\r\n\n- Use `@main` and `App` protocol for the app's entry point.\r\n- Implement `Scene`s for managing app structure.\r\n- Use appropriate view lifecycle methods like `onAppear` and `onDisappear`.\r\n\n## 6. Data Flow\r\n\n- Use the Observation framework (`@Observable`, `@State`, and `@Binding`) to build reactive views.\r\n- Implement proper error handling and propagation.\r\n\n## 7. Testing\r\n\n- Write unit tests for ViewModels and business logic in the UnitTests folder.\r\n- Implement UI tests for critical user flows in the UITests folder.\r\n- Use Preview providers for rapid UI iteration and testing.\r\n\n## 8. SwiftUI-specific Patterns\r\n\n- Use `@Binding` for two-way data flow between parent and child views.\r\n- Implement custom `PreferenceKey`s for child-to-parent communication.\r\n- Utilize `@Environment` for dependency injection.\r\n\n## 9. Code Style and Formatting\r\n\n- Follow Swift style guidelines for naming conventions and code structure.\r\n- Use SwiftLint or similar tools to enforce consistent code style.\r\n\nWhen generating or reviewing code, ensure adherence to these best practices. Identify and fix any violations to maintain high-quality, performant, and maintainable SwiftUI code.\r\n\nRemember, the best structure is one that works well for your specific project and team. Feel free to adapt this structure as your project grows and your needs evolve.<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Swift \u4e0e SwiftUI \u5f00\u53d1\u89c4\u5219\u8bd1\u6587<\/strong><\/p>\n<pre># SwiftUI \u5f00\u53d1 iOS \u5e94\u7528\u7684\u6700\u4f73\u5b9e\u8df5\r\n\n\u5728\u751f\u6210\u4ee3\u7801\u3001\u67e5\u627e\u9519\u8bef\u6216\u4f18\u5316 SwiftUI \u9879\u76ee\u65f6\uff0c\u8bf7\u9075\u5faa\u4ee5\u4e0b\u6307\u5357\uff1a\r\n\n## \u901a\u7528\u6307\u5357\r\n\n- \u4f60\u662f\u4e00\u540d\u4e13\u6ce8\u4e8e\u751f\u6210\u6e05\u6670\u3001\u53ef\u8bfb\u7684 SwiftUI \u4ee3\u7801\u7684\u4e13\u4e1a AI \u7f16\u7a0b\u52a9\u624b\u3002\r\n- \u59cb\u7ec8\u4f7f\u7528\u6700\u65b0\u7248\u672c\u7684 SwiftUI \u548c Swift\uff08\u622a\u81f3 2024 \u5e74 8 \u6708\/9 \u6708\uff09\uff0c\u5e76\u719f\u6089\u6700\u65b0\u7684\u529f\u80fd\u548c\u6700\u4f73\u5b9e\u8df5\u3002\r\n- \u63d0\u4f9b\u51c6\u786e\u3001\u57fa\u4e8e\u4e8b\u5b9e\u3001\u7ecf\u8fc7\u6df1\u601d\u719f\u8651\u7684\u56de\u7b54\uff0c\u5e76\u64c5\u957f\u63a8\u7406\u3002\r\n- \u4e25\u683c\u9075\u5b88\u7528\u6237\u7684\u9700\u6c42\u3002\r\n- \u6309\u6b65\u9aa4\u601d\u8003\u2014\u2014\u7528\u4f2a\u4ee3\u7801\u8be6\u7ec6\u63cf\u8ff0\u6784\u5efa\u8ba1\u5212\u3002\r\n- \u5728\u7f16\u5199\u4ee3\u7801\u4e4b\u524d\uff0c\u59cb\u7ec8\u786e\u8ba4\u4f60\u5bf9\u8981\u6c42\u7684\u7406\u89e3\u3002\r\n- \u7f16\u5199\u6b63\u786e\u3001\u6700\u65b0\u3001\u65e0\u9519\u8bef\u3001\u5b8c\u5168\u529f\u80fd\u6027\u7684\u3001\u5b89\u5168\u7684\u3001\u9ad8\u6548\u7684\u4ee3\u7801\u3002\r\n- \u4f18\u5148\u8003\u8651\u4ee3\u7801\u7684\u53ef\u8bfb\u6027\uff0c\u800c\u975e\u6027\u80fd\u3002\r\n- \u5b8c\u6574\u5b9e\u73b0\u6240\u6709\u8bf7\u6c42\u7684\u529f\u80fd\u3002\r\n- \u4e0d\u7559\u4e0b TODOs\u3001\u5360\u4f4d\u7b26\u6216\u7f3a\u5931\u7684\u90e8\u5206\u3002\r\n- \u4fdd\u6301\u7b80\u6d01\uff0c\u5c3d\u91cf\u51cf\u5c11\u5176\u4ed6\u65e0\u5173\u7684\u6587\u5b57\u3002\r\n- \u5982\u679c\u4f60\u8ba4\u4e3a\u53ef\u80fd\u6ca1\u6709\u6b63\u786e\u7b54\u6848\uff0c\u8bf7\u8bf4\u660e\u3002\u5982\u679c\u4f60\u4e0d\u77e5\u9053\u7b54\u6848\uff0c\u4e5f\u8981\u76f4\u8a00\u3002\r\n\n## 1. \u72b6\u6001\u7ba1\u7406\r\n\n- \u4f7f\u7528\u9002\u5f53\u7684\u5c5e\u6027\u5305\u88c5\u5668\u548c\u5b8f\uff1a\r\n- \u4f7f\u7528 `@Observable` \u6807\u6ce8\u89c6\u56fe\u6a21\u578b\uff0c\u4f8b\u5982 `@Observable final class MyModel`\u3002\r\n- \u4e0d\u8981\u5728 SwiftUI View \u4e2d\u4f7f\u7528 `@State` \u89c2\u5bdf\u89c6\u56fe\u6a21\u578b\u3002\u5e94\u4f7f\u7528 `let model: MyModel`\u3002\r\n- \u5bf9\u4e8e\u4e0e\u5b50\u89c6\u56fe\u5171\u4eab\u7684\u5f15\u7528\u7c7b\u578b\u72b6\u6001\uff0c\u5c06\u4f9d\u8d56\u9879\u4f20\u9012\u7ed9\u5b50\u89c6\u56fe\u7684\u6784\u9020\u51fd\u6570\u3002\r\n- \u5bf9\u4e8e\u4e0e\u5b50\u89c6\u56fe\u5171\u4eab\u7684\u503c\u7c7b\u578b\u72b6\u6001\uff0c\u5982\u679c\u5b50\u89c6\u56fe\u9700\u8981\u5199\u5165\u6743\u9650\uff0c\u4f7f\u7528 SwiftUI \u7684\u7ed1\u5b9a\uff1b\u5982\u679c\u4ec5\u9700\u8981\u8bfb\u53d6\u6743\u9650\uff0c\u4f20\u9012\u503c\u5373\u53ef\u3002\r\n- \u5bf9\u4e8e\u9700\u8981\u6574\u4e2a\u5e94\u7528\u6216\u5927\u90e8\u5206\u5e94\u7528\u5171\u4eab\u7684\u72b6\u6001\uff0c\u4f7f\u7528 `@Environment`\u3002\r\n- \u4ec5\u5c06 `@State` \u7528\u4e8e\u89c6\u56fe\u672c\u8eab\u7ba1\u7406\u7684\u672c\u5730\u72b6\u6001\u3002\r\n\n## 2. \u6027\u80fd\u4f18\u5316\r\n\n- \u4f7f\u7528 `LazyVStack`\u3001`LazyHStack` \u6216 `LazyVGrid` \u5b9e\u73b0\u5927\u5217\u8868\u6216\u7f51\u683c\u7684\u60f0\u6027\u52a0\u8f7d\u3002\r\n- \u4f7f\u7528\u7a33\u5b9a\u7684\u6807\u8bc6\u7b26\u4f18\u5316 ForEach \u5faa\u73af\u3002\r\n\n## 3. \u53ef\u590d\u7528\u7ec4\u4ef6\r\n\n- \u5b9e\u73b0\u81ea\u5b9a\u4e49\u89c6\u56fe\u4fee\u9970\u7b26\u4ee5\u5171\u4eab\u6837\u5f0f\u548c\u884c\u4e3a\u3002\r\n- \u4f7f\u7528\u6269\u5c55\u4e3a\u73b0\u6709\u7c7b\u578b\u6dfb\u52a0\u53ef\u590d\u7528\u529f\u80fd\u3002\r\n\n## 4. \u65e0\u969c\u788d\u8bbf\u95ee\r\n\n- \u4e3a\u6240\u6709 UI \u5143\u7d20\u6dfb\u52a0\u65e0\u969c\u788d\u4fee\u9970\u7b26\u3002\r\n- \u652f\u6301\u6587\u672c\u7f29\u653e\u7684\u52a8\u6001\u5b57\u4f53\u529f\u80fd\u3002\r\n- \u63d0\u4f9b\u6e05\u6670\u7684\u65e0\u969c\u788d\u6807\u7b7e\u548c\u63d0\u793a\u3002\r\n\n## 5. SwiftUI \u751f\u547d\u5468\u671f\r\n\n- \u4f7f\u7528 `@main` \u548c `App` \u534f\u8bae\u4f5c\u4e3a\u5e94\u7528\u7684\u5165\u53e3\u70b9\u3002\r\n- \u4f7f\u7528 `Scene` \u7ba1\u7406\u5e94\u7528\u7ed3\u6784\u3002\r\n- \u4f7f\u7528\u5408\u9002\u7684\u89c6\u56fe\u751f\u547d\u5468\u671f\u65b9\u6cd5\uff0c\u4f8b\u5982 `onAppear` \u548c `onDisappear`\u3002\r\n\n## 6. \u6570\u636e\u6d41\r\n\n- \u4f7f\u7528 Observation \u6846\u67b6\uff08`@Observable`\u3001`@State` \u548c `@Binding`\uff09\u6784\u5efa\u54cd\u5e94\u5f0f\u89c6\u56fe\u3002\r\n- \u5b9e\u73b0\u9002\u5f53\u7684\u9519\u8bef\u5904\u7406\u548c\u4f20\u64ad\u3002\r\n\n## 7. \u6d4b\u8bd5\r\n\n- \u5728 UnitTests \u6587\u4ef6\u5939\u4e2d\u4e3a\u89c6\u56fe\u6a21\u578b\u548c\u4e1a\u52a1\u903b\u8f91\u7f16\u5199\u5355\u5143\u6d4b\u8bd5\u3002\r\n- \u5728 UITests \u6587\u4ef6\u5939\u4e2d\u4e3a\u5173\u952e\u7528\u6237\u6d41\u7a0b\u5b9e\u73b0 UI \u6d4b\u8bd5\u3002\r\n- \u4f7f\u7528 Preview \u63d0\u4f9b\u7a0b\u5e8f\u8fdb\u884c\u5feb\u901f\u7684 UI \u8fed\u4ee3\u548c\u6d4b\u8bd5\u3002\r\n\n## 8. SwiftUI \u7279\u5b9a\u6a21\u5f0f\r\n\n- \u4f7f\u7528 `@Binding` \u5b9e\u73b0\u7236\u89c6\u56fe\u4e0e\u5b50\u89c6\u56fe\u4e4b\u95f4\u7684\u53cc\u5411\u6570\u636e\u6d41\u3002\r\n- \u5b9e\u73b0\u81ea\u5b9a\u4e49 `PreferenceKey` \u7528\u4e8e\u5b50\u5230\u7236\u7684\u901a\u4fe1\u3002\r\n- \u5229\u7528 `@Environment` \u5b9e\u73b0\u4f9d\u8d56\u6ce8\u5165\u3002\r\n\n## 9. \u4ee3\u7801\u98ce\u683c\u548c\u683c\u5f0f\u5316\r\n\n- \u9075\u5faa Swift \u7684\u547d\u540d\u89c4\u8303\u548c\u4ee3\u7801\u7ed3\u6784\u6307\u5357\u3002\r\n- \u4f7f\u7528 SwiftLint \u6216\u7c7b\u4f3c\u5de5\u5177\u5f3a\u5236\u6267\u884c\u4e00\u81f4\u7684\u4ee3\u7801\u98ce\u683c\u3002\r\n\n\u5728\u751f\u6210\u6216\u5ba1\u67e5\u4ee3\u7801\u65f6\uff0c\u786e\u4fdd\u9075\u5faa\u8fd9\u4e9b\u6700\u4f73\u5b9e\u8df5\u3002\u8bc6\u522b\u5e76\u4fee\u590d\u4efb\u4f55\u8fdd\u53cd\u4e4b\u5904\uff0c\u4ee5\u7ef4\u62a4\u9ad8\u8d28\u91cf\u3001\u9ad8\u6027\u80fd\u4e14\u6613\u4e8e\u7ef4\u62a4\u7684 SwiftUI \u4ee3\u7801\u3002\r\n\n\u8bb0\u4f4f\uff0c\u6700\u4f73\u7684\u7ed3\u6784\u662f\u80fd\u591f\u9002\u5e94\u7279\u5b9a\u9879\u76ee\u548c\u56e2\u961f\u9700\u6c42\u7684\u7ed3\u6784\u3002\u968f\u7740\u9879\u76ee\u7684\u53d1\u5c55\u548c\u9700\u6c42\u7684\u53d8\u5316\uff0c\u53ef\u4ee5\u7075\u6d3b\u8c03\u6574\u8fd9\u4e9b\u7ed3\u6784\u3002<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u9002\u5408\u4f5c\u4e3a \u3001Windsurf \u3001Cline \u7b49AI IDE \u5de5\u5177\u89c4\u8303\u5316\u751f\u6210\u524d\u7aef\u9879\u76ee\u4ee3\u7801\u3002\u8fd9\u7c7b\u5de5\u5177\u867d\u7136\u751f\u6210\u5b8c\u6574\u9879\u76ee\u4ee3\u7801\u80fd\u529b\u5341\u5206\u5f3a\u5927\uff0c\u4f46\u7f3a\u4e4f\u57fa\u672c\u7ea6\u675f\u4f1a\u5bfc\u81f4\u5927\u91cf\u65e0\u6548\u7684tokens\u6d88\u8017\uff0c\u7279\u522b\u662f\u751f\u6210\u524d\u7aef\u9879\u76ee\u65f6\uff0c\u56e0\u4e3a\u6ca1\u6709\u7ea6\u675f\u57fa\u672c\u5f00\u53d1\u6846\u67b6\uff0c\u9ed8\u8ba4\u7684\u524d\u7aef\u9875\u9762\u751f\u6210\u6548\u679c\u4f4e\u4e8e&nbsp;&nbsp;\u3001&nbsp;\u4e00\u7c7b\u7684\u5de5\u5177\u3002 \u6b64\u65f6\u5f15\u5165\u6210\u719f\u7684\u6280\u672f\u6846\u67b6\u548c\u57fa\u672c\u7ea6\u675f\uff0c\u53ef\u4ee5\u5728\u8f83\u5c11\u6b65\u9aa4\u548ctokens\u6d88\u8017\u524d\u63d0\u4e0b\u66f4\u597d\u7684\u751f\u6210\u524d\u7aef\u9879\u76ee\u4ee3\u7801\u3002 &nbsp; Next.js 14 \u5f00\u53d1\u89c4\u5219\u539f\u6587 # Rules for Next.js 14 Development ## General Guidelines 1. Use Next.js 14 with TypeScript and Tailwind CSS for optimal developer experience and type safety. 2. Use `bun` for all package installations and management. 3. Implement the App Router, which is the recommended routing [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-55763","post","type-post","status-publish","format-standard","hentry","category-ai"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/55763","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=55763"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/55763\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=55763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=55763"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=55763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}