Documentation

Learn how to use this Next.js boilerplate to build your application.

Getting Started

Learn how to set up and run the project

Clone the repository

git clone https://github.com/yourusername/nextjs-boilerplate.git

Install dependencies

npm install

Start the development server

npm run dev

Project Structure

Understanding the organization of files

app/ - App Router pages and layouts

components/ - Reusable UI components

lib/ - Utility functions and shared code

public/ - Static assets like images

styles/ - Global styles and Tailwind config

Styling

How to style your components

This boilerplate uses Tailwind CSS for styling. You can use Tailwind utility classes directly in your JSX:

<div className="p-4 bg-white rounded-lg shadow">
  <h2 className="text-xl font-bold mb-2">Title</h2>
  <p className="text-gray-600">Content goes here</p>
</div>

Components

Using shadcn/ui components

The boilerplate includes shadcn/ui components that you can import and use:

import { Button } from "@/components/ui/button"

export default function MyComponent() {
  return (
    <Button variant="outline">Click me</Button>
  )
}