next.js实现项目搭建-EW帮帮网

一、创建 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】注意事项

确保文件名正确：
- 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 页面的头部和底部，同时保持代码的整洁和可维护性。

next.js实现项目搭建

一、创建 Next.js 项目的步骤

1、安装

1、运行

2、常用命令

3. 额外配置

添加 TypeScript（如果初始未选择）

二、Next.js (TypeScript) 配置多个页面的方法

方法一：使用传统的 `pages` 路由

1、创建页面文件

2、基本页面示例

3、动态路由页面

方法二：使用新的 `app` 路由 (Next.js 13+)

1. 创建页面结构

2. 基本页面示例

3. 动态路由页面

【1】页面间导航

【2】获取路由参数

【3】注意事项

三、复用 Header 和 Footer 组件

方法一、创建可复用组件（推荐）

1、创建共享组件

2、创建布局组件（可选但推荐）

3、在页面中使用

方法二、使用根布局 (App Router 特有)

1、修改根布局

2、页面内容会自动嵌入

方法三、使用模板组件

【1】最佳实践建议

网站公告

今日签到

热门文章

最新发布

next.js实现项目搭建

一、创建 Next.js 项目的步骤

1、安装

1、运行

2、常用命令

3. 额外配置

添加 TypeScript（如果初始未选择）

二、Next.js (TypeScript) 配置多个页面的方法

方法一：使用传统的 pages 路由

1、创建页面文件

2、基本页面示例

3、动态路由页面

方法二：使用新的 app 路由 (Next.js 13+)

1. 创建页面结构

2. 基本页面示例

3. 动态路由页面

【1】页面间导航

【2】获取路由参数

【3】注意事项

三、复用 Header 和 Footer 组件

方法一、创建可复用组件（推荐）

1、创建共享组件

2、创建布局组件（可选但推荐）

3、在页面中使用

方法二、使用根布局 (App Router 特有)

1、修改根布局

2、页面内容会自动嵌入

方法三、使用模板组件

【1】最佳实践建议

网站公告

今日签到

热门文章

最新发布

方法一：使用传统的 `pages` 路由

方法二：使用新的 `app` 路由 (Next.js 13+)