Next.js Template

A reusable Next.js template for any website project. Built with Next.js, React, and Tailwind CSS.

Features

• Responsive - Mobile-first design
• Dark Mode - Light/dark theme toggle
• SEO Optimized - Metadata, sitemap, robots.txt
• Type-Safe - Full TypeScript support
• Prose Styling - Beautiful blog/article styling
• Animations - Smooth fade, slide, scale animations
• Fast - Static generation ready

Tech Stack

Project Structure

nextjs-template/
├── src/
│   ├── app/             # Next.js App Router pages
│   │   ├── globals.css  # Global styles & design tokens
│   │   ├── layout.tsx  # Root layout
│   │   ├── page.tsx     # Homepage
│   │   ├── error.tsx   # Error boundary
│   │   ├── loading.tsx  # Loading state
│   │   ├── not-found.tsx # 404 page
│   │   ├── robots.ts   # robots.txt
│   │   └── sitemap.ts # sitemap.xml
│   ├── components/       # React components
│   │   ├── layout/     # Layout components
│   │   │   ├── Navbar.tsx
│   │   │   ├── Footer.tsx
│   │   │   ├── Container.tsx
│   │   │   └── PageHeader.tsx
│   │   ├── providers/  # Context providers
│   │   │   └── ThemeProvider.tsx
│   │   └── ui/         # UI components
│   │       ├── Button.tsx
│   │       ├── Badge.tsx
│   │       ├── Card.tsx
│   │       ├── Input.tsx
│   │       ├── Textarea.tsx
│   │       ├── Avatar.tsx
│   │       ├── Divider.tsx
│   │       ├── Icon.tsx
│   │       ├── Skeleton.tsx
│   │       ├── Tag.tsx
│   │       └── Toaster.tsx
│   ├── data/            # Static data
│   │   └── site.ts      # Site configuration
│   ├── lib/            # Utility functions
│   │   ├── constants.ts  # Site constants
│   │   ├── fonts.ts   # Font configuration
│   │   └── utils.ts  # General utilities
│   └── types/           # TypeScript types
│       └── index.ts    # Type definitions
├── .env.example        # Environment variables template
├── next.config.ts       # Next.js configuration
├── postcss.config.mjs  # PostCSS configuration
├── tsconfig.json     # TypeScript configuration
├── package.json    # Dependencies and scripts
└── vitest.config.ts # Vitest configuration

Getting Started

Prerequisites

• Node.js 20.0.0+
• npm

Installation

# Clone the repository
git clone https://github.com/yourusername/nextjs-template.git
cd nextjs-template

# Install dependencies
npm install

# Copy environment variables
cp .env.example .env.local

Development

# Start development server
npm run dev

# Run type checking
npm run type-check

# Run linting
npm run lint

Build

# Build for production
npm run build

# Start production server
npm run start

Customization

Site Configuration

Edit src/lib/constants.ts to configure your site:

export const siteConfig = {
  name: 'Your Site Name',
  description: 'Your site description',
  url: 'https://your-domain.com',
  author: {
    name: 'Your Name',
    bio: 'About you',
  },
};

export const mainNav = [
  { label: 'Home', href: '/' },
  { label: 'About', href: '/about' },
  { label: 'Contact', href: '/contact' },
];

Adding Pages

Create new pages in src/app/:

// src/app/about/page.tsx
import { Container } from '@/components/layout/Container';

export default function AboutPage() {
  return (
    <Container>
      <h1>About Me</h1>
      <p>Your content here...</p>
    </Container>
  );
}

Adding Components

Use existing UI components or create new ones:

import { Button } from '@/components/ui/Button';
import { Card } from '@/components/ui/Card';

export function MyComponent() {
  return (
    <Card>
      <h2>Title</h2>
      <p>Content</p>
      <Button>Click Me</Button>
    </Card>
  );
}

Design System

Colors

Typography

CSS Variables

The template uses CSS custom properties via Tailwind CSS v4:

@theme {
  --color-accent: #0d9488;
  --color-background: #fafaf9;
  --color-foreground: #1c1917;
  --font-sans: var(--font-inter), system-ui, sans-serif;
  --font-serif: var(--font-lora), Georgia, serif;
  --font-mono: var(--font-jetbrains-mono), monospace;
}

Prose Styling

Use the .prose class for beautiful article content:

<article className="prose">
  <h2>Heading</h2>
  <p>Paragraph with serif font...</p>
  <blockquote>Quote</blockquote>
  <code>Inline code</code>
  <pre>Code block</pre>
</article>

Available Scripts

Pages

Project Stats

• 29 TypeScript/TSX files
• 11 UI components
• 4 Layout components
• 3 Utility libraries
• 4 Configuration files

Favicons

Generate favicons at https://realfavicongenerator.net/ and add them to public/:

/public/
├── favicon.ico
├── apple-icon.png
├── android-chrome-192x192.png
├── android-chrome-512x512.png
└── og-image.png

Update src/app/layout.tsx to include the favicon references.

License

MIT License - feel free to use this template for any project.

Acknowledgments

Built with Next.js, Tailwind CSS, and Vercel.

Built with ❤️ by Joshua Argent