精通 Next.js：2024 年构建大型项目的终极指南

简介：驯服 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
|_ 📁 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 超级能力

创建自定义钩子来封装复杂的逻辑：

// 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 成功的专业技巧

拥抱应用程序路由器：它不仅仅是新的；它还能改变性能和嵌套布局。
代码拆分是你的朋友：使用动态导入可以使你的应用程序保持快速：

   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 路由获胜：保持服务器端逻辑安全且分离：

   // 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 项目始终井然有序、无 bug！🚀

请记住，成功构建大型 Next.js 项目的关键不仅在于初始设置，还在于如何随着项目发展维护和改进架构。保持灵活性，持续学习，并在必要时勇于重构。你一定可以做到！

文章来源：https://dev.to/vyan/mastering-nextjs-the-ultimate-guide-to-structuring-large-scale-projects-in-2024-h4e

精通 Next.js：2024 年构建大型项目的终极指南

精通 Next.js：2024 年构建大型项目的终极指南

简介：驯服 Next.js 丛林

为什么你的 Next.js 项目结构可以成就你，也可以毁掉你

让你忍不住想用框架来构建的 Next.js 项目结构

Next.js 应用的核心：app目录

路线分组(auth)

API 路由：伪装的后端

布局和页面：UI 的构建块

组件：你的 Next.js 乐高套装

UI 组件：构建块

表单组件：让数据输入变得轻而易举

布局组件：UI 的框架

配角：lib、、hooks和types

lib：你的实用腰带

hooks: 自定义 React 超级能力

types：TypeScript 的最佳朋友

为你的 Next.js 杰作设计风格

公共资产：应用程序的面貌

配置：项目的骨干

大规模 Next.js 成功的专业技巧

总结：您的 Next.js 项目已组织完毕并准备扩展

Next.js 应用的核心：`app`目录

路线分组`(auth)`

配角：`lib`、、`hooks`和`types`

`lib`：你的实用腰带

`hooks`: 自定义 React 超级能力

`types`：TypeScript 的最佳朋友