next.js实现项目搭建

一、创建 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.json

2、安装 TypeScript 依赖

npm install --save-dev typescript @types/react @types/node

3、重新运行 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/:id

2、基本页面示例

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/:id

2. 基本页面示例

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】注意事项

1. 确保文件名正确：

   • pages 路由：直接使用 .tsx 文件

   • app 路由：必须在文件夹内创建 page.tsx

2. 动态路由参数：

   • pages 路由：使用 [param].tsx 格式

   • app 路由：使用 [param]/page.tsx 格式

3. 如果你同时使用 pages 和 app 路由，Next.js 会优先使用 app 路由。

4. 对于 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】最佳实践建议

1. 推荐使用方法一（独立组件+布局组件）：

   • 灵活性最高

   • 可以轻松在某些页面中隐藏 Header/Footer

   • 便于维护和更新

2. 如果 Header/Footer 在所有页面都相同：

   • 可以使用方法二（根布局）

   • 最简单直接

3. 需要不同变体时：

   • 可以创建多个布局组件（如 LayoutWithNav, SimpleLayout）

   • 根据页面需求选择不同布局

这样配置后，你的 about 页面将自动复用 home 页面的头部和底部，同时保持代码的整洁和可维护性。