growthly-digital-agency-nextjs-template — Next.js 企业官网模板

SHA-256: 0d6ec83531e21740d2a0e77d71850265548a4787c684430e1e9be2235cfebb47

2026-10-13T17:45:16.579Z

# Premium Next.js Template

A professional, production-ready Next.js template built with TypeScript and Tailwind CSS. Perfect for creating modern web applications, landing pages, and business websites.

## 🚀 Features

- **Next.js 14** - Latest version with App Router
- **TypeScript** - Full type safety
- **Tailwind CSS** - Utility-first CSS framework
- **Responsive Design** - Mobile-first approach
- **Modern UI Components** - Pre-built, reusable components
- **SEO Optimized** - Built-in SEO best practices
- **Performance** - Optimized for speed and performance
- **ThemeForest Ready** - Prepared for ThemeForest submission

## 📦 What's Included

- ✅ 10+ Pre-built Pages (Home, About, Services, Portfolio, Blog, Contact)
- ✅ 20+ Reusable Components (Header, Footer, Hero, Features, etc.)
- ✅ Responsive Navigation with Mobile Menu
- ✅ Contact Form with Validation
- ✅ Modern Design System
- ✅ Custom Animations
- ✅ Dark Mode Support Ready
- ✅ Clean Code Structure
- ✅ Comprehensive Documentation

## 🛠️ Installation

1. **Clone or download the template**
   ```bash
   # If using git
   git clone <repository-url>
   cd nextjs-premium-template
   ```

2. **Install dependencies**
   ```bash
   npm install
   # or
   yarn install
   # or
   pnpm install
   ```

3. **Run the development server**
   ```bash
   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   ```

4. **Open your browser**
   Navigate to [http://localhost:3000](http://localhost:3000)

## 📁 Project Structure

```
nextjs-premium-template/
├── app/                          # Next.js App Router
│   ├── about/
│   │   └── page.tsx             # About page
│   ├── blog/
│   │   └── page.tsx             # Blog listing page
│   ├── contact/
│   │   └── page.tsx             # Contact page
│   ├── portfolio/
│   │   └── page.tsx             # Portfolio page
│   ├── services/
│   │   └── page.tsx             # Services page
│   ├── globals.css               # Global styles
│   ├── layout.tsx                # Root layout
│   └── page.tsx                  # Home page
│
├── components/                   # React components
│   ├── layout/                   # Layout components
│   │   ├── Header.tsx           # Site header/navigation
│   │   └── Footer.tsx           # Site footer
│   ├── sections/                 # Page sections
│   │   ├── Hero.tsx             # Hero section
│   │   ├── Features.tsx         # Features section
│   │   ├── Stats.tsx            # Statistics section
│   │   ├── Testimonials.tsx     # Testimonials section
│   │   └── CTA.tsx              # Call-to-action section
│   └── ui/                       # Reusable UI components
│
├── lib/                          # Utility functions
│   └── utils.ts                  # Helper functions
│
├── types/                        # TypeScript type definitions
│   └── index.ts                  # Shared types
│
├── public/                       # Static assets
│   ├── images/                   # Image assets
│   ├── icons/                    # Icon files
│   └── fonts/                    # Custom fonts (if any)
│
├── styles/                       # Additional styles (if needed)
│
├── package.json                  # Dependencies and scripts
├── tsconfig.json                 # TypeScript config
├── tailwind.config.ts            # Tailwind CSS config
├── next.config.js                # Next.js config
└── README.md                     # This file
```

## 🎨 Customization

### Colors

Edit `tailwind.config.ts` to customize the color scheme:

```typescript
colors: {
  primary: {
    // Your primary colors
  },
  secondary: {
    // Your secondary colors
  },
}
```

### Fonts

Fonts are configured in `app/layout.tsx`. You can change them by:

1. Importing a new font from `next/font/google`
2. Adding it to the `variable` prop
3. Using it in your Tailwind config

### Components

Components are organized in the `components/` directory:
- **layout/**: Site-wide layout components (Header, Footer)
- **sections/**: Page section components (Hero, Features, etc.)
- **ui/**: Small, reusable UI components

All components are fully customizable and follow React best practices.

## 📄 Pages

- **Home** (`/`) - Landing page with hero, features, stats, testimonials
- **About** (`/about`) - About page with company information
- **Services** (`/services`) - Services showcase page
- **Portfolio** (`/portfolio`) - Portfolio/projects gallery
- **Blog** (`/blog`) - Blog listing page
- **Contact** (`/contact`) - Contact form page

## 🔧 Configuration

### Environment Variables

Create a `.env.local` file for environment-specific variables:

```env
NEXT_PUBLIC_SITE_URL=https://yourdomain.com
```

### Next.js Config

The `next.config.js` file includes basic configuration. You can extend it based on your needs.

## 📱 Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## 📝 License

This template is licensed under the MIT License. See LICENSE file for details.

## 🆘 Support

For support, email [email protected] or open an issue in the repository.

## 🙏 Credits

- [Next.js](https://nextjs.org/)
- [React](https://reactjs.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [React Icons](https://react-icons.github.io/react-icons/)

## 📈 ThemeForest Submission Checklist

- ✅ Clean, professional design
- ✅ Responsive layout
- ✅ Well-documented code
- ✅ Multiple page templates
- ✅ Reusable components
- ✅ SEO optimized
- ✅ Performance optimized
- ✅ Cross-browser compatible
- ✅ Easy to customize
- ✅ Production ready

## 🚀 Build for Production

```bash
npm run build
npm start
```

## 📄 Documentation

For detailed documentation, please refer to the inline code comments and component documentation.

---

**Made with ❤️ for ThemeForest**