Documentation

Prerequisites

Before getting started, make sure you have the following installed and configured on your system:

• Node.js (version 14 or higher) - Download Node.js
• npm (usually installed with Node.js) or yarn
• Git - Download Git
• A code editor like Visual Studio Code - Download VS Code
• A PostgreSQL account (you can use a service like Neon for a hosted PostgreSQL database)

Also, ensure you have a basic understanding of React, Next.js, and TypeScript to make the most of this template.

Getting Started

1. Clone the repository:

   git clone https://github.com/ClementG91/Next-Template.git
2. Navigate to the project directory:

   cd Next-Template
3. Install dependencies:

   npm install
4. Configure environment variables:

   Copy the .env.example file to .env and fill in the necessary values:

   cp .env.example .env

   Open the .env file and update the following variables:

   • POSTGRES_URL, POSTGRES_PRISMA_URL, POSTGRES_URL_NO_SSL, POSTGRES_URL_NON_POOLING: Your PostgreSQL database URLs
   • POSTGRES_USER, POSTGRES_HOST, POSTGRES_PASSWORD, POSTGRES_DATABASE: Your PostgreSQL connection information
   • NEXTAUTH_SECRET: A random string for NextAuth.js
   • NEXTAUTH_URL, NEXT_PUBLIC_BASE_URL: Your application's URL
   • DISCORD_CLIENT_ID, DISCORD_CLIENT_SECRET: Your Discord client credentials
   • GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET: Your Google client credentials
   • EMAIL_SERVER_HOST, EMAIL_SERVER_PORT, EMAIL_SERVER_USER, EMAIL_SERVER_PASSWORD, EMAIL_FROM, EMAIL_TO: Your SMTP server configuration for sending emails
5. Set up the database:

   npx prisma db push

   npx prisma generate
6. Start the development server:

   npm run dev

Your application should now be running on http://localhost:3000.

7. Build the application:

   npm run build

Key Technologies

Project Structure

• app/: Next.js 13+ App Router structure
  • layout.tsx: Root layout component
  • page.tsx: Home page component
  • (auth)/: Authentication-related pages
  • (user)/: User-related pages (e.g., dashboard)
• components/: Reusable React components
  • ui/: UI components (buttons, cards, etc.)
  • layout/: Layout components (navbar, footer)
  • pages/: Page-specific components
• lib/: Utility functions and configurations
  • prisma.ts: Prisma client instance
  • auth.ts: NextAuth.js configuration
• prisma/: Database schema and migrations
  • schema.prisma: Prisma schema file
• public/: Static assets
• types/: TypeScript type definitions

Customization

This template is designed to be highly customizable. Here are some key areas you can modify:

• Tailwind CSS configuration:

  Edit tailwind.config.js to customize colors, fonts, and other design tokens.

• Authentication providers:

  Modify lib/authOptions.ts to add or remove authentication providers.

• API routes:

  Add or modify API routes in the app/api directory.

• Database schema:

  Extend the Prisma schema in prisma/schema.prisma for new data models.

• UI components:

  Customize existing components or add new ones in the components/ui directory.