AI-Powered Next.js Template for Cursor IDE

A modern, AI-integrated Next.js template designed specifically for the Cursor IDE. This template provides a robust foundation for building intelligent web applications with features like AI image generation, web research, optimization tools, brand asset creation, and internationalization support.

Features

🌐 Internationalization

• Built-in support for multiple languages (English, Finnish)
• SEO-friendly URL structure with locale prefixes
• Server-side locale detection
• Client-side language switching
• JSON-based translation management

🎨 AI Image Generation

• Powered by Recraft V3 API
• Multiple style options including digital illustrations and realistic images
• Customizable image parameters
• Batch generation support

🔧 Image Optimization

• Automatic image optimization with Sharp.js
• WebP conversion for modern browsers
• Background removal capabilities
• Flexible resizing and quality settings

🎯 Brand Asset Generator

• Create consistent brand assets with AI
• Generate logos and variations
• Social media templates
• Business card designs

🔍 Web Research Tools

• AI-powered web search with Tavily API
• Multiple search modes: regular, Q&A, and context
• Domain filtering and advanced search options
• HTML to Markdown conversion for content processing

Tech Stack

• Frontend: Next.js 15.1.3, React 19
• Styling: Tailwind CSS, Geist Font
• AI Integration: Recraft V3 API, Tavily API
• Image Processing: Sharp.js
• Internationalization: next-intl
• Development: TypeScript, ESLint
• Performance: Built-in image optimization, responsive design

Getting Started

1. Clone the repository:

   git clone https://github.com/LastBotInc/nextjs-ai-webpage.git
   cd nextjs-ai-webpage

2. Install dependencies:

   npm install

3. Set up environment variables:

   cp .env.example .env.local

   Add your API keys:

   • REPLICATE_API_TOKEN: Get from Replicate
   • TAVILY_API_KEY: Get from Tavily

4. Run the development server:

   npm run dev

5. Open http://localhost:3000 to view the application

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
• npm run test: Run tests (when implemented)

Tools

Image Generation

npx tsx tools/recraft.ts --prompt "your prompt" --style "style_name" [options]

Options:

• --style: Choose from various styles (digital_illustration, realistic_image, etc.)
• --width & --height: Set image dimensions
• --num_outputs: Number of images to generate
• More options available in the tool documentation

Image Optimization

npx tsx tools/image-optimizer.ts <input> <o> [options]

Options:

• --format: Convert to webp/png/jpeg
• --quality: Set compression quality (1-100)
• --resize: Resize image (e.g., 800x600)
• --remove-bg: Remove image background

Web Search

npm run tavily-search -- --query "your search query" [options]

Options:

• --type: Search type (search, qna, context)
• --depth: Search depth (basic, advanced)
• --max-results: Maximum number of results
• --include: Domains to include
• --exclude: Domains to exclude

HTML to Markdown

npm run html-to-md -- --url "webpage-url" [options]

Options:

• --output: Output file path
• --selector: CSS selector for specific content

Project Structure

├── app/                  # Next.js app directory
│   ├── [locale]/        # Locale-specific routes
│   └── layout.tsx       # Root layout
├── components/          # Reusable React components
├── i18n/               # Internationalization setup
├── messages/           # Translation files
├── public/             # Static assets
│   └── images/         # Optimized images
├── tools/              # CLI tools
│   ├── recraft.ts      # Image generation
│   ├── image-optimizer.ts # Image processing
│   ├── tavily-search.ts  # Web search
│   └── html-to-md.ts     # Content conversion
├── styles/             # Global styles
└── docs/              # Project documentation

Documentation

Detailed documentation is available in the docs directory:

• Architecture
• Frontend Guide
• Backend Guide
• API Documentation

Contributing

1. Fork the repository from GitHub
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Next.js - The React Framework
• Tailwind CSS - Utility-first CSS framework
• Recraft AI - AI image generation
• Tavily - AI-powered web search
• next-intl - Internationalization framework
• Cursor IDE - AI-powered code editor