React Next Template

English | 中文

---

English

Project Overview

React Next Template is a modern, responsive web application built with Next.js 14, React 18, and Material-UI. The project features internationalization support, state management with Redux Toolkit, and a sleek, professional design.

🚀 Features

• Next.js 14 - Latest React framework with App Router
• React 18 - Modern React with concurrent features
• TypeScript - Type-safe development
• Material-UI (MUI) - Professional UI components and theming
• Internationalization - Multi-language support (English/Chinese)
• Redux Toolkit - Modern state management
• Swiper - Touch-enabled slider/carousel
• Responsive Design - Mobile-first approach
• SEO Optimized - Server-side rendering capabilities

🛠 Tech Stack

• Framework: Next.js 14.2.5
• UI Library: React 18
• Styling: Material-UI 5.16.6 + Emotion
• State Management: Redux Toolkit + React-Redux
• Internationalization: next-i18next
• Type Checking: TypeScript 5
• Build Tool: Webpack (Next.js built-in)
• Package Manager: npm

📦 Installation

1. Clone the repository

   git clone <repository-url>
   cd react-next-template

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

4. Build for production

   npm run build

5. Open your browser Navigate to http://localhost:3000

🏗 Project Structure

react-next-template/
├── .next/                 # Next.js build output
├── public/               # Static assets
│   └── locales/         # Translation files
├── pages/               # Next.js pages (App Router)
├── components/          # Reusable React components
├── store/               # Redux store configuration
├── styles/              # Global styles and themes
├── utils/               # Utility functions
├── next.config.js       # Next.js configuration
├── next-i18next.config.js # i18n configuration
├── package.json         # Dependencies and scripts
└── tsconfig.json        # TypeScript configuration

🚀 Available Scripts

• npm run dev - Start development server
• npm run build- Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

🌐 Internationalization

The project supports both English and Chinese languages. Translation files are located in public/locales/.

🔧 Configuration

• Next.js Configuration: Located in next.config.js
• i18n Configuration: Located in next-i18next.config.js
• Material-UI Theme: Located in styles/theme.ts

📱 Responsive Design

The website is designed to be mobile-first and responsive, with a focus on providing a smooth user experience across all devices.

🚀 Deployment

The project is configured for easy deployment on platforms like Vercel, Netlify, or any Node.js hosting service.

npm run build
npm run start

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a new branch for your feature or bug fix
3. Commit your changes with clear, concise messages
4. Push to your fork and submit a pull request

---

中文

项目概述

React Next Template 是一个使用 Next.js 14、React 18 和 Material-UI 构建的现代化响应式 Web 应用程序。该项目具有国际化支持、使用 Redux Toolkit 的状态管理以及时尚专业的设计。

🚀 功能特性

• Next.js 14 - 最新的 React 框架，支持 App Router
• React 18 - 现代 React，支持并发特性
• TypeScript - 类型安全的开发
• Material-UI (MUI) - 专业的 UI 组件和主题系统
• 国际化 - 多语言支持（英文/中文）
• Redux Toolkit - 现代状态管理
• Swiper - 支持触摸的轮播组件
• 响应式设计 - 移动优先的设计方法
• SEO 优化 - 服务端渲染能力

🛠 技术栈

• 框架: Next.js 14.2.5
• UI 库: React 18
• 样式: Material-UI 5.16.6 + Emotion
• 状态管理: Redux Toolkit + React-Redux
• 国际化: next-i18next
• 类型检查: TypeScript 5
• 构建工具: Webpack（Next.js 内置）
• 包管理器: npm

📦 安装指南

1. 克隆仓库

   git clone <仓库地址>
   cd react-next-template

2. 安装依赖

   npm install

3. 运行开发服务器

   npm run dev

4. 构建生产版本

   npm run build

5. 打开浏览器，导航到 http://localhost:3000

🏗 项目结构

react-next-template/
├── .next/                 # Next.js 构建输出
├── public/               # 静态资源
│   └── locales/         # 翻译文件
├── pages/               # Next.js 页面（App Router）
├── components/          # 可复用的 React 组件
├── store/               # Redux 存储配置
├── styles/              # 全局样式和主题
├── utils/               # 实用函数
├── next.config.js       # Next.js 配置
├── next-i18next.config.js # i18n 配置
├── package.json         # 依赖和脚本
└── tsconfig.json        # TypeScript 配置

🚀 可用脚本

• npm run dev - 启动开发服务器
• npm run build- 构建生产版本
• npm run start - 启动生产服务器
• npm run lint - 运行 ESLint

🌐 国际化

该项目支持英文和中文两种语言。翻译文件位于 public/locales/ 目录下。

🔧 配置

• Next.js 配置: 位于 next.config.js
• i18n 配置: 位于 next-i18next.config.js
• Material-UI 主题: 位于 styles/theme.ts

📱 响应式设计

网站采用移动优先的设计理念，确保在所有设备上都能提供流畅的用户体验。

🚀 部署

该项目配置了便于在 Vercel、Netlify 或任何 Node.js 托管服务上部署。

npm run build
npm run start

🤝 贡献

欢迎贡献！请按照以下步骤操作：

1. Fork 仓库到你的 GitHub 账号
2. 创建一个新分支用于你的功能或 bug 修复
3. 提交你的更改，确保提交信息清晰、简洁
4. 将更改推送到你的 fork 仓库
5. 提交一个 pull request 到主仓库