小編精選 - 技術文章翻譯  ·  08月04日

掌握 Next.js：2024 年建立大型專案的終極指南

掌握 Next.js：2024 年建立大型專案的終極指南

征服 Next.js 叢林

嘿，程式碼管理員和 Next.js 愛好者！ 👋 您是否感覺像印第安納瓊斯一樣，在元件、鉤子和配置文件的茂密叢林中進行黑客攻擊？別擔心，在這次冒險中你並不孤單。我曾經在那裡，手裡拿著砍刀，試圖在大型 Next.js 計畫的荒野中開闢出一條道路。

但事情是這樣的：有了正確的地圖和工具，您的 Next.js 叢林可以成為一個組織良好、欣欣向榮的生態系統。在這份綜合指南中，我將分享我在建立大型 Next.js 專案方面來之不易的智慧。無論您是擴展現有應用程式還是從頭開始建立新的龐然大物，本指南都是您值得信賴的指南針。

為什麼 Next.js 專案結構可以成就你，也可以毀掉你

在我們深入討論細節之前，讓我們談談為什麼花時間在專案結構上就像投資一雙好的編碼鞋一樣——它會帶你走得更遠，讓你感到舒適：

  1. 開發者理智：良好的結構意味著更少的時間玩“沃爾多在哪裡？”與您的元件和更多的時間實際編碼。

  2. 團隊和諧：當您的團隊可以蒙著眼睛來完成專案時，協作就會變得輕而易舉，而不是一場戰鬥。

  3. 可擴展性：一個結構良好的專案會像快樂的植物一樣有機地生長，而不是突變成程式碼怪物。

  4. 效能提升：當您的專案依邏輯組織時，Next.js 最佳化功能效果最佳。

  5. 可維護性：未來的你（或繼承你的專案的可憐的靈魂）將永遠感激一個乾淨、直觀的結構。

讓您想要建立它的 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
|_ 📁 layouts

UI 元件：建構塊

建立可重複使用的 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 成功的專業技巧

  1. 擁抱 App Router ：它不僅是新事物，而且是新事物。它改變了效能和嵌套佈局的遊戲規則。

  2. 程式碼分割是你的朋友：使用動態導入來保持你的應用程式敏捷：

   import dynamic from 'next/dynamic';

   const DynamicComponent = dynamic(() => import('../components/HeavyComponent'));
  1. 優化這些圖像：Next.js 的圖像元件就像圖像的私人教練：
   import Image from 'next/image';

   export default function Hero() {
     return <Image src="/hero-image.png" alt="Hero" width={1200} height={600} priority />;
   }
  1. 伺服器元件 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>;
   }
  1. 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 專案成功的關鍵不僅在於初始設置，還在於隨著專案的發展如何維護和發展您的結構。保持靈活性，不斷學習，並且在需要時不要害怕重構。你已經得到這個了！

原文出處：https://dev.to/vyan/mastering-nextjs-the-ultimate-guide-to-structuring-large-scale-projects-in-2024-h4e

0個讚   0留言 382瀏覽
共有 0 則留言
登入之後發表留言
小編精選 - 技術文章翻譯
精選技術文章翻譯，幫助開發者持續吸收新知。
熱門文章
🔥 給網頁工程師的 24 個強大資源 [HTML + CSS + JavaScript]
🔥 自學網頁の嬰兒教材：JavaScript（三）作業分享
🔥 你可以從 Netflix 架構中學到的 10 件事
🔥 SQL 中的 Count(*) 與 Count(1)
🔥 如果你正要接案：一個關於時薪的簡單評估方法
最新出爐專案包
⭐ 邁向資深之路：非同步 JS 訓練（二）—— 各種寫法的錯誤處理、收尾處理
⭐ 邁向資深之路：非同步 JS 訓練（一）—— 從 Callback Hell 到 Promise 介面
⭐ Github Desktop 新手入門教學 —— 用漂亮的 GUI 介面來學習 Git 基本觀念
⭐ 邁向資深之路：後端 JS 訓練（二）—— 玩玩看 Express，用純後端做做看部落格
⭐ 邁向資深之路：後端 JS 訓練（一）—— 玩玩看 Node，做做看老派 CLI 應用程式
熱門搜尋： 使用 開發 工作 專案 分享 ar 技術 for 網站 github id API 學習 作為 Ml 作業 第一 js html Javascript 測試 AI 搜尋 java HTML javascript Git Java git %' app JAVA javasc 前端 api JavaScript 開源 ui 系列 user 網頁 語言 ul jav COM CD url 結構 套件 架構 ci Line py 框架 css ＣＳＳ AWS go 清單 後端 編輯 GIT 研究 Ai Can Node 主題 bi 工程師 部署 react 伺服器 資料庫 Github this console REACT 遊戲 create with aws JS json 部落格 component Javas 查詢 新手 CSS 登入 分析 Python class node 入門 練習 新創 乾淨 課程 非同步
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。