Next.js Boilerplate

Minimal starter for building apps with Next.js (App Router) and Tailwind CSS.

Scripts

• npm run dev – start the development server
• npm run build – create a production build
• npm run start – run the production server
• npm run lint – run ESLint

Structure

• app/ – application routes, layouts, and pages
• app/page.js – example home page (safe to replace)
• app/layout.js – root layout and metadata
• app/globals.css – global styles and Tailwind layers
• lib/utils.js – utility helpers (e.g. cn className merge)
• lib/auth.js – NextAuth configuration
• lib/auth-server.js – server-side auth utilities
• components/login-form.jsx – login form component

Getting started

1. Install dependencies:

npm install

2. Set up environment variables:

Create a .env.local file in the root directory with the following variables:

# Site Configuration
NEXT_PUBLIC_SITE_URL=http://localhost:3000

# NextAuth Configuration
NEXTAUTH_SECRET=your-secret-key-here-generate-with-openssl-rand-base64-32
NEXTAUTH_URL=http://localhost:3000

# Google OAuth (optional)
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

# Apple OAuth (optional)
APPLE_ID=your-apple-service-id
APPLE_TEAM_ID=your-apple-team-id
APPLE_KEY_ID=your-apple-key-id
APPLE_PRIVATE_KEY=your-apple-private-key

# Strapi API (optional, if using)
STRAPI_URL=https://your-strapi-instance.com
STRAPI_TOKEN=your-strapi-token

To generate a secure NEXTAUTH_SECRET, run:

openssl rand -base64 32

3. Run the dev server:

npm run dev

4. Start building your app in app/.

Authentication

This boilerplate includes NextAuth.js with support for:

• Google OAuth
• Apple Sign In
• Credentials (email/password) - requires custom implementation

The login page is available at /login. To use authentication in your components:

Client-side:

"use client"
import { useSession, signIn, signOut } from "next-auth/react"

export function MyComponent() {
  const { data: session } = useSession()
  // Use session data
}

Server-side:

import { getSession } from "@/lib/auth-server"

export default async function MyPage() {
  const session = await getSession()
  // Use session data
}