Next.js 构建一个企业官网是一个非常实用的 React 实战项目使用 Next.js 构建一个企业官网是一个非常实

使用 Next.js 构建一个企业官网是一个非常实用的 React 实战项目。以下是一个详细的操作步骤以及代码 demo，帮助你从 0 到 1 快速完成开发。

🏗 项目概览

目标：使用 Next.js 构建一个现代化企业官网，包含：首页、关于我们、服务、联系我们等页面。

技术栈：

React (通过 Next.js)
Next.js（App Router 模式）
Tailwind CSS（快速样式）
TypeScript（可选）
SEO优化（meta 标签、OpenGraph）
响应式设计（移动端适配）

🚀 步骤一：初始化 Next.js 项目

npx create-next-app@latest my-company-site

配置选项：
- TypeScript: ✅ 推荐
- Tailwind CSS: ✅ 推荐
- App Router: ✅ 推荐（选择 src/app 结构）
- ESLint: ✅
- src 目录结构: ✅

进入目录：

cd my-company-site
npm run dev

📁 项目结构说明（App Router）

my-company-site/
├── src/
│   ├── app/
│   │   ├── page.tsx         # 首页
│   │   ├── about/
│   │   │   └── page.tsx     # 关于我们
│   │   ├── services/
│   │   │   └── page.tsx     # 服务
│   │   ├── contact/
│   │   │   └── page.tsx     # 联系我们
│   ├── components/          # 可复用组件
│   ├── styles/              # 样式
├── public/                  # 静态资源
├── tailwind.config.js
└── next.config.js

✍️ 页面示例代码

1. 首页：`src/app/page.tsx`

export default function HomePage() {
  return (
    <main className="text-center py-20">
      <h1 className="text-5xl font-bold text-blue-600">欢迎来到 XX 公司</h1>
      <p className="mt-4 text-gray-600">我们为您提供最专业的企业解决方案。</p>
    </main>
  );
}

2. 关于我们：`src/app/about/page.tsx`

export default function AboutPage() {
  return (
    <main className="max-w-3xl mx-auto py-10">
      <h2 className="text-3xl font-semibold mb-4">关于我们</h2>
      <p>
        XX 公司成立于 2010 年，致力于为客户提供高质量的 IT 服务。我们的核心价值是诚信、创新与协作。
      </p>
    </main>
  );
}

3. 服务页面：`src/app/services/page.tsx`

const services = [
  { title: "网站开发", description: "企业官网、商城、Web应用开发" },
  { title: "移动端开发", description: "小程序、App开发" },
  { title: "IT 咨询", description: "数字化转型解决方案" },
];

export default function ServicesPage() {
  return (
    <main className="max-w-4xl mx-auto py-10 px-4">
      <h2 className="text-3xl font-bold mb-6">我们的服务</h2>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {services.map((s, i) => (
          <div key={i} className="border rounded-xl p-4 shadow hover:shadow-lg transition">
            <h3 className="text-xl font-semibold">{s.title}</h3>
            <p className="text-gray-500 mt-2">{s.description}</p>
          </div>
        ))}
      </div>
    </main>
  );
}

4. 联系我们：`src/app/contact/page.tsx`

export default function ContactPage() {
  return (
    <main className="max-w-xl mx-auto py-10 px-4">
      <h2 className="text-3xl font-bold mb-4">联系我们</h2>
      <form className="flex flex-col gap-4">
        <input className="border p-2 rounded" placeholder="姓名" />
        <input className="border p-2 rounded" placeholder="邮箱" />
        <textarea className="border p-2 rounded" placeholder="留言内容" rows={4} />
        <button className="bg-blue-600 text-white py-2 rounded hover:bg-blue-700">提交</button>
      </form>
    </main>
  );
}

🔁 可复用组件（如导航栏）

`src/components/Navbar.tsx`

import Link from 'next/link';

export default function Navbar() {
  return (
    <nav className="bg-white shadow sticky top-0 z-50">
      <div className="max-w-7xl mx-auto flex justify-between items-center p-4">
        <Link href="/" className="text-xl font-bold text-blue-600">XX 公司</Link>
        <div className="space-x-4">
          <Link href="/about">关于我们</Link>
          <Link href="/services">服务</Link>
          <Link href="/contact">联系我们</Link>
        </div>
      </div>
    </nav>
  );
}

在 src/app/layout.tsx 中引入：

import './globals.css'
import { ReactNode } from 'react'
import Navbar from '@/components/Navbar'

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="zh">
      <body>
        <Navbar />
        {children}
      </body>
    </html>
  )
}

🧠 SEO 基础配置

在每个页面中添加：

export const metadata = {
  title: '关于我们 - XX 公司',
  description: '了解我们的发展历程、使命和团队。',
}

📱 响应式设计

使用 Tailwind CSS 的响应式类名，比如：

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">

🔚 部署到 Vercel（推荐）

npx vercel

登录后选择项目目录，几秒钟后即可自动部署上线。

✅ 总结

你现在已经掌握了：

如何使用 Next.js 快速构建企业官网
使用 Tailwind CSS 实现响应式布局
页面导航、组件复用、SEO 设置
实战代码示例

Next.js 构建一个企业官网是一个非常实用的 React 实战项目