bigai-workflow-nextjs — Next.js 启动器模板

SHA-256: ca0d7abedf9e5e64c4f278d8055aee00294e3a77c28fafd099c4c201b44cc17b

2026-10-14T21:12:38.745Z

# bigA.i Workflow Next.js Template

**bigA.i Workflow Next.js Template** is the open-source Next.js implementation of our original [bigA.i Workflow Framer Template](<https://www.framer.com/community/marketplace/templates/biga-i-workflow-2-0/>).

The Framer template provides the original design direction and visual foundation, while this Next.js version brings the same workflow-first approach to a production-ready, developer-friendly environment.

bigA.i Workflow is a modern website template for AI startups, automation products, and SaaS businesses. It provides reusable sections, structured content, responsive layouts, and a scalable project architecture.

Framer Template: [bigA.i Workflow — AI Workflow & Automation Website Template](<https://www.framer.com/community/marketplace/templates/biga-i-workflow-2-0/>)

## Features

* Modern AI workflow and automation-focused design
* Next.js + TypeScript
* Responsive design
* Reusable page sections and components
* Structured content using JSON
* Blog and case study pages
* Pricing page
* Contact form
* Dynamic metadata
* SEO-friendly page structure
* Custom 404 page
* Dark-mode UI support where applicable
* Tailwind CSS
* Lucide icons
* shadcn/ui components
* Production-ready project structure

## Demo

**Live Demo:** https://bigai-workflow-nextjs-demo.bigbistudio.com

## Requirements

* Node.js 20+
* npm 10+

## Installation

Clone the repository:

```
git clone https://github.com/bigbistudio/bigai-workflow-nextjs.git
cd bigai-workflow-nextjs
```

Install dependencies:

```
npm install
```

Create your local environment file:

```
cp .env.example .env.local
```

Start the development server:

```
npm run dev
```

Open http://localhost:3000 in your browser.

## Environment Variables

Create a `.env.local` file in the project root.

```env
# Contact form
RESEND_API_KEY=

# Cloudflare Turnstile
TURNSTILE_SECRET_KEY=
NEXT_PUBLIC_TURNSTILE_SITE_KEY=
```

Some environment variables are optional depending on the features you enable.

Never commit `.env.local` or other files containing private credentials.

## Development

Start the development server:

```
npm run dev
```

Run ESLint:

```
npm run lint
```

Run the TypeScript check:

```
npm run typecheck
```

Create a production build:

```
npm run build
```

Start the production server locally:

```
npm run start
```

## Build

Create an optimized production build:

```
npm run build
```

After the build completes, start the production server:

```
npm run start
```

Before deploying, make sure that:

* TypeScript passes
* ESLint passes
* The production build succeeds
* Required environment variables are configured
* All important routes work correctly

## Deployment

bigA.i Workflow can be deployed to platforms that support Next.js applications.

### Vercel

The recommended deployment platform is Vercel.

1. Import the repository into your Vercel account.
2. Configure the required environment variables.
3. Deploy the project.
4. Configure your custom domain if required.

Make sure production environment variables are configured before using features that require external services.

## Customization

### Site Content

Static site content is organized in the `src` data directory.

Update the relevant JSON files to customize:

* Site information
* Navigation
* Page content
* Pricing
* Blog content
* Case studies
* Other template content

### Pages

Pages are organized using the Next.js App Router.

You can add, remove, or modify pages without changing the underlying reusable section architecture.

### Sections

Reusable sections are organized separately from route files.

This allows you to compose pages from existing sections and create new pages without duplicating UI code.

### Design

The project uses Tailwind CSS and shared design tokens.

Customize:

* Colors
* Typography
* Spacing
* Border radius
* Breakpoints
* Containers
* Other design tokens

### Metadata

Page metadata is managed separately from the page UI.

You can customize:

* Page titles
* Meta descriptions
* Open Graph metadata
* Twitter metadata
* Other SEO-related metadata

## Project Structure

```text
src/
├── app/                    # Next.js routes and layouts
├── components/
│   └── ui/                 # Shared UI primitives
└── bigbistudio/
    ├── components/         # Template components
    │   ├── graphics/
    │   ├── icons/
    │   ├── layout/
    │   ├── logo/
    │   └── ui/
    ├── data/               # Site content and configuration
    ├── lib/                # Data and application utilities
    ├── pages/              # Page-level views
    ├── sections/           # Reusable page sections
    ├── styles/             # Theme styles
    ├── types/              # TypeScript types
    └── utils/              # Shared utilities
```

The exact project structure may evolve as the template is updated. Refer to the source code for the most current organization.

## Credits

This project uses open-source libraries and tools including:

* Next.js
* React
* TypeScript
* Tailwind CSS
* Lucide
* shadcn/ui
* Radix UI

Please refer to the respective projects for their individual licenses and attribution requirements.

## License

bigA.i Workflow Next.js Template is open source and licensed under the MIT License.

You are free to use, modify, and distribute the project according to the terms of the license.

See the [LICENSE](LICENSE) file for the complete license text.

> **Note:** Third-party assets included in this project may be subject to their respective licenses.

---

Made with care by [**bigbi studio.**](https://bigbistudio.com/)