一、創建 Next.js 項目的步驟
1、安裝
npx create-next-app@latest
# 或
yarn create next-app
# 或
pnpm create next-app按照交互式提示配置你的項目：
輸入項目名稱
選擇是否使用 TypeScript
選擇是否啟用 ESLint
選擇是否啟用 Tailwind CSS
選擇是否使用?
src/?目錄選擇是否啟用實驗性 App 路由功能
選擇是否自定義導入別名
1、運行
npm run dev項目將在?http://localhost:3000?啟動。
2、常用命令
npm run dev?- 啟動開發服務器
npm run build?- 構建生產版本
npm run start?- 啟動生產服務器
npm run lint?- 運行 ESLint
3. 額外配置
添加 TypeScript（如果初始未選擇）
1、創建空 tsconfig.json：
touch tsconfig.json2、安裝 TypeScript 依賴
npm install --save-dev typescript @types/react @types/node3、重新運行?npm run dev，Next.js 會自動配置 tsconfig.json
添加樣式
Next.js 支持多種樣式解決方案：
CSS Modules（內置支持）
Tailwind CSS（推薦）
Sass（需要安裝?
sass）CSS-in-JS（如 styled-components, emotion）
二、Next.js (TypeScript) 配置多個頁面的方法
在 Next.js 中配置多個頁面非常簡單，主要取決于你使用的是傳統的?pages?路由還是新的?app?路由（Next.js 13+）。以下是兩種方式的配置方法：
方法一：使用傳統的?pages?路由
1、創建頁面文件
在?pages?目錄下，每個文件都會自動成為一個路由：
pages/
├── index.tsx // 對應路徑 /
├── about.tsx // 對應路徑 /about
├── blog/
│ ├── index.tsx // 對應路徑 /blog
│ └── [slug].tsx // 動態路由 /blog/:slug
└── users/└── [id].tsx // 動態路由 /users/:id2、基本頁面示例
pages/about.tsx:
import React from 'react';const AboutPage: React.FC = () => {return (<div><h1>關于我們</h1><p>這是關于我們的頁面</p></div>);
};export default AboutPage;3、動態路由頁面
pages/blog/[slug].tsx:
import { useRouter } from 'next/router';const BlogPost: React.FC = () => {const router = useRouter();const { slug } = router.query;return (<div><h1>博客文章: {slug}</h1><p>這是關于 {slug} 的文章內容</p></div>);
};export default BlogPost;方法二：使用新的?app?路由 (Next.js 13+)
1. 創建頁面結構
app/
├── page.tsx // 對應路徑 /
├── about/
│ └── page.tsx // 對應路徑 /about
├── blog/
│ ├── page.tsx // 對應路徑 /blog
│ └── [slug]/
│ └── page.tsx // 動態路由 /blog/:slug
└── users/└── [id]/└── page.tsx // 動態路由 /users/:id2. 基本頁面示例
app/about/page.tsx:
export default function AboutPage() {return (<div><h1>關于我們</h1><p>這是關于我們的頁面</p></div>);
}3. 動態路由頁面
app/blog/[slug]/page.tsx:
export default function BlogPost({params,
}: {params: { slug: string };
}) {return (<div><h1>博客文章: {params.slug}</h1><p>這是關于 {params.slug} 的文章內容</p></div>);
}【1】頁面間導航
使用 Next.js 的?Link?組件實現頁面間導航：
import Link from 'next/link';export default function Navigation() {return (<nav><Link href="/">首頁</Link><Link href="/about">關于</Link><Link href="/blog">博客</Link><Link href="/blog/first-post">第一篇文章</Link></nav>);
}【2】獲取路由參數
在?pages?路由中:
import { useRouter } from 'next/router';// 在組件內
const router = useRouter();
const { id } = router.query;在?app?路由中:
// 直接從組件的 props 中獲取
export default function Page({ params }: { params: { id: string } }) {return <div>ID: {params.id}</div>;
}【3】注意事項
-
確保文件名正確：
-
pages?路由：直接使用?.tsx?文件 -
app?路由：必須在文件夾內創建?page.tsx
-
-
動態路由參數：
-
pages?路由：使用?[param].tsx?格式 -
app?路由：使用?[param]/page.tsx?格式
-
-
如果你同時使用?
pages?和?app?路由，Next.js 會優先使用?app?路由。 -
對于 API 路由：
-
pages?路由：放在?pages/api?目錄下 -
app?路由：放在?app/api?目錄下
-
這樣配置后，你的 Next.js 應用就可以支持多個頁面和動態路由了。
三、復用 Header 和 Footer 組件
登錄是一個頁面，其他首頁，個人中心，關于我們等頁面，頭部和底部配置好，不需要在每個使用的頁面中引用。
方法一、創建可復用組件（推薦）
1、創建共享組件
首先，將 Header 和 Footer 拆分為獨立組件：
// components/Header.tsx
export default function Header() {return (<header className="w-full h-12 bg-pink-500 flex items-center justify-center"><h1 className="text-white font-bold">頭部導航</h1></header>);
}// components/Footer.tsx
export default function Footer() {return (<footer className="w-full h-12 bg-yellow-300 flex items-center justify-center"><p className="text-gray-800">? 2023 版權所有</p></footer>);
}2、創建布局組件（可選但推薦）
// components/Layout.tsx
import Header from './Header';
import Footer from './Footer';export default function Layout({ children }: { children: React.ReactNode }) {return (<div className="min-h-screen flex flex-col"><Header /><main className="flex-1 p-4">{children}</main><Footer /></div>);
}3、在頁面中使用
home 頁面:
// app/home/page.tsx
import Layout from '@/components/Layout';export default function HomePage() {return (<Layout><section className="max-w-4xl mx-auto"><h2 className="text-2xl font-bold mb-4">首頁內容</h2><p>這里是首頁的內容...</p></section></Layout>);
}about 頁面:
// app/about/page.tsx
import Layout from '@/components/Layout';export default function AboutPage() {return (<Layout><section className="max-w-4xl mx-auto"><h2 className="text-2xl font-bold mb-4">關于我們</h2><p>這里是關于我們的內容...</p></section></Layout>);
}方法二、使用根布局 (App Router 特有)
1、修改根布局
// app/layout.tsx
import Header from '@/components/Header';
import Footer from '@/components/Footer';export default function RootLayout({children,
}: {children: React.ReactNode;
}) {return (<html lang="zh-CN"><body className="min-h-screen flex flex-col"><Header /><main className="flex-1">{children}</main><Footer /></body></html>);
}2、頁面內容會自動嵌入
這樣所有頁面都會自動包含 Header 和 Footer，無需在每個頁面單獨引入。
方法三、使用模板組件
如果你需要某些頁面有不同的布局：
// app/template.tsx
'use client';import Header from '@/components/Header';
import Footer from '@/components/Footer';export default function Template({ children }: { children: React.ReactNode }) {return (<div className="min-h-screen flex flex-col"><Header /><main className="flex-1 p-4">{children}</main><Footer /></div>);
}然后在頁面中使用：
// app/about/page.tsx
import Template from '@/app/template';export default function AboutPage() {return (<Template><section className="max-w-4xl mx-auto"><h2 className="text-2xl font-bold mb-4">關于我們</h2><p>這里是關于我們的內容...</p></section></Template>);
}【1】最佳實踐建議
-
推薦使用方法一（獨立組件+布局組件）：
-
靈活性最高
-
可以輕松在某些頁面中隱藏 Header/Footer
-
便于維護和更新
-
-
如果 Header/Footer 在所有頁面都相同：
-
可以使用方法二（根布局）
-
最簡單直接
-
-
需要不同變體時：
-
可以創建多個布局組件（如?
LayoutWithNav,?SimpleLayout） -
根據頁面需求選擇不同布局
-
這樣配置后，你的 about 頁面將自動復用 home 頁面的頭部和底部，同時保持代碼的整潔和可維護性。
)
