征服 Next.js 叢林
嘿，程式碼管理員和 Next.js 愛好者！ 👋 您是否感覺像印第安納瓊斯一樣，在元件、鉤子和配置文件的茂密叢林中進行黑客攻擊？別擔心，在這次冒險中你並不孤單。我曾經在那裡，手裡拿著砍刀，試圖在大型 Next.js 計畫的荒野中開闢出一條道路。
但事情是這樣的：有了正確的地圖和工具，您的 Next.js 叢林可以成為一個組織良好、欣欣向榮的生態系統。在這份綜合指南中，我將分享我在建立大型 Next.js 專案方面來之不易的智慧。無論您是擴展現有應用程式還是從頭開始建立新的龐然大物，本指南都是您值得信賴的指南針。
為什麼 Next.js 專案結構可以成就你，也可以毀掉你
在我們深入討論細節之前，讓我們談談為什麼花時間在專案結構上就像投資一雙好的編碼鞋一樣——它會帶你走得更遠，讓你感到舒適：
-
開發者理智：良好的結構意味著更少的時間玩“沃爾多在哪裡？”與您的元件和更多的時間實際編碼。
-
團隊和諧：當您的團隊可以蒙著眼睛來完成專案時，協作就會變得輕而易舉，而不是一場戰鬥。
-
可擴展性：一個結構良好的專案會像快樂的植物一樣有機地生長，而不是突變成程式碼怪物。
-
效能提升：當您的專案依邏輯組織時，Next.js 最佳化功能效果最佳。
-
可維護性：未來的你（或繼承你的專案的可憐的靈魂）將永遠感激一個乾淨、直觀的結構。
讓您想要建立它的 Next.js 專案結構
好啦，請打鼓！ 🥁 這是一個在大規模 Next.js 開發的戰壕中經過考驗的結構：
📁 my-awesome-nextjs-project
|
|_ 📁 app
| |_ 📁 (auth)
| | |_ 📁 login
| | | |_ 📄 page.tsx
| | | |_ 📄 layout.tsx
| | |_ 📁 register
| | |_ 📄 page.tsx
| | |_ 📄 layout.tsx
| |_ 📁 dashboard
| | |_ 📄 page.tsx
| | |_ 📄 layout.tsx
| |_ 📁 api
| | |_ 📁 users
| | | |_ 📄 route.ts
| | |_ 📁 posts
| | |_ 📄 route.ts
| |_ 📄 layout.tsx
| |_ 📄 page.tsx
|
|_ 📁 components
| |_ 📁 ui
| | |_ 📄 Button.tsx
| | |_ 📄 Card.tsx
| | |_ 📄 Modal.tsx
| |_ 📁 forms
| | |_ 📄 LoginForm.tsx
| | |_ 📄 RegisterForm.tsx
| |_ 📁 layouts
| |_ 📄 Header.tsx
| |_ 📄 Footer.tsx
| |_ 📄 Sidebar.tsx
|
|_ 📁 lib
| |_ 📄 api.ts
| |_ 📄 utils.ts
| |_ 📄 constants.ts
|
|_ 📁 hooks
| |_ 📄 useUser.ts
| |_ 📄 useAuth.ts
| |_ 📄 usePosts.ts
|
|_ 📁 types
| |_ 📄 user.ts
| |_ 📄 post.ts
| |_ 📄 api.ts
|
|_ 📁 styles
| |_ 📄 globals.css
| |_ 📄 variables.css
|
|_ 📁 public
| |_ 📁 images
| | |_ 📄 logo.svg
| | |_ 📄 hero-image.png
| |_ 📁 fonts
| |_ 📄 custom-font.woff2
|
|_ 📁 config
| |_ 📄 seo.ts
| |_ 📄 navigation.ts
|
|_ 📄 next.config.js
|_ 📄 package.json
|_ 📄 tsconfig.json
|_ 📄 .env.local
|_ 📄 .gitignore現在，讓我們分解一下，看看為什麼每個部分對於您的 Next.js 傑作都至關重要。
Next.js 應用程式的核心： app目錄
app目錄是神奇發生的地方。它是 Next.js 13+ 專案的核心，利用新的 App Router：
📁 app
|_ 📁 (auth)
| |_ 📁 login
| |_ 📁 register
|_ 📁 dashboard
|_ 📁 api
|_ 📄 layout.tsx
|_ 📄 page.tsx路由分組為(auth)
(auth)資料夾是一種在不影響 URL 結構的情況下對相關路由進行分組的巧妙方法。它非常適合組織與身份驗證相關的頁面。
// app/(auth)/login/page.tsx
export default function LoginPage() {
return <h1>Welcome to the Login Page</h1>;
}API 路由：偽裝的後端
保持api目錄中後端邏輯的整齊。每個檔案成為一個 API 路由：
// app/api/users/route.ts
import { NextResponse } from 'next/server';
export async function GET() {
// Fetch users logic
return NextResponse.json({ users: ['Alice', 'Bob'] });
}佈局和頁面：UI 的建置塊
使用layout.tsx建立跨頁面一致的設計：
// app/layout.tsx
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}每個page.tsx代表應用程式中的唯一路徑：
// app/page.tsx
export default function HomePage() {
return <h1>Welcome to our awesome Next.js app!</h1>;
}元件：您的 Next.js 樂高套裝
將元件視為樂高積木。它們組織得很好，很容易找到並且使用起來很有趣：
📁 components
|_ 📁 ui
|_ 📁 forms
|_ 📁 layoutsUI 元件：建構塊
建立可重複使用的 UI 元素，以保持整個應用程式的一致性：
// components/ui/Button.tsx
export default function Button({ children, onClick }) {
return (
<button onClick={onClick} className="bg-blue-500 text-white py-2 px-4 rounded">
{children}
</button>
);
}表單元件：讓資料輸入變得輕而易舉
封裝表單邏輯以獲得更清晰、更易於維護的程式碼：
// components/forms/LoginForm.tsx
import { useState } from 'react';
import Button from '../ui/Button';
export default function LoginForm({ onSubmit }) {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
return (
<form onSubmit={(e) => {
e.preventDefault();
onSubmit(email, password);
}}>
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
<Button type="submit">Log In</Button>
</form>
);
}佈局元件：UI 的框架
使用可重複使用的佈局元件建立一致的頁面結構：
// components/layouts/Header.tsx
import Link from 'next/link';
export default function Header() {
return (
<header>
<nav>
<Link href="/">Home</Link>
<Link href="/dashboard">Dashboard</Link>
<Link href="/profile">Profile</Link>
</nav>
</header>
);
}支援演員： lib 、 hooks和types
這些目錄是您專案的無名英雄：
lib ：你的實用腰帶
在這裡儲存輔助函數和常數：
// lib/utils.ts
export function formatDate(date: Date): string {
return date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
}
// lib/constants.ts
export const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'https://api.example.com';hooks : 自訂 React Superpower
建立自訂鉤子來封裝複雜邏輯：
// hooks/useUser.ts
import { useState, useEffect } from 'react';
import { fetchUser } from '../lib/api';
export function useUser(userId: string) {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetchUser(userId).then(userData => {
setUser(userData);
setLoading(false);
});
}, [userId]);
return { user, loading };
}types ：TypeScript 最好的朋友
定義您的 TypeScript 介面和類型：
// types/user.ts
export interface User {
id: string;
name: string;
email: string;
role: 'admin' | 'user';
}
// types/post.ts
export interface Post {
id: string;
title: string;
content: string;
authorId: string;
createdAt: Date;
}設計您的 Next.js 傑作
讓您的樣式在styles目錄中井然有序：
/* styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Your custom global styles here */
body {
font-family: 'Arial', sans-serif;
}
/* styles/variables.css */
:root {
--primary-color: #3490dc;
--secondary-color: #ffed4a;
--text-color: #333333;
}公共資產：應用程式的面貌
public目錄是靜態資產的所在地。優化圖像並使用自訂字體讓您的應用程式大放異彩：
import Image from 'next/image';
export default function Logo() {
return <Image src="/images/logo.svg" alt="Company Logo" width={200} height={50} />;
}配置：專案的支柱
不要忘記根目錄中的這些重要檔案：
// next.config.js
module.exports = {
images: {
domains: ['example.com'],
},
// Other Next.js config options
};
// .env.local
DATABASE_URL=postgresql://username:password@localhost:5432/mydb
NEXT_PUBLIC_API_URL=https://api.example.com大規模 Next.js 成功的專業技巧
-
擁抱 App Router ：它不僅是新事物，而且是新事物。它改變了效能和嵌套佈局的遊戲規則。
-
程式碼分割是你的朋友：使用動態導入來保持你的應用程式敏捷：
import dynamic from 'next/dynamic';
const DynamicComponent = dynamic(() => import('../components/HeavyComponent'));- 優化這些圖像：Next.js 的圖像元件就像圖像的私人教練：
import Image from 'next/image';
export default function Hero() {
return <Image src="/hero-image.png" alt="Hero" width={1200} height={600} priority />;
}- 伺服器元件 FTW ：使用它們來削減您的客戶端 JavaScript：
// This component will be rendered on the server by default in Next.js 13+
export default async function UserProfile({ userId }) {
const user = await fetchUser(userId);
return <div>Welcome, {user.name}!</div>;
}- API Routes for the Win ：保持伺服器端邏輯的安全性和分離：
// pages/api/posts.ts
import type { NextApiRequest, NextApiResponse } from 'next';
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
if (req.method === 'GET') {
const posts = await fetchPosts();
res.status(200).json(posts);
} else {
res.status(405).end(); // Method Not Allowed
}
}總結：您的 Next.js 專案井井有條並準備好擴展
現在你已經有了它——一個讓你的大型 Next.js 專案感覺就像一台運作良好的機器的結構。請記住，這不是一刀切的解決方案。請隨意調整它以滿足您專案的獨特需求。
透過遵循這種結構，您將花更少的時間去思考事情的發展方向，而花更多的時間來建立出色的功能。您的程式碼將更加清晰，您的團隊將更加快樂，您的專案將像夢想一樣擴展。
還在等什麼？在您的下一個專案中嘗試這個結構。未來的你（和你的隊友）將會為此向你擊掌！
祝您編碼愉快，並祝您的 Next.js 專案始終井井有條且沒有錯誤！ 🚀
請記住，大型 Next.js 專案成功的關鍵不僅在於初始設置，還在於隨著專案的發展如何維護和發展您的結構。保持靈活性，不斷學習，並且在需要時不要害怕重構。你已經得到這個了！
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式