Next.js 14 CRUD Template

This template provides a starting point for building CRUD (Create, Read, Update, Delete) applications using Next.js 14 with App Router, Supabase, and flexible authentication options.

Features

• Next.js 14 with App Router
• TypeScript support
• Supabase integration for backend operations
• Flexible authentication options:
  • Clerk
  • NextAuth.js (with Azure AD support)
  • Option for no auth (bring your own auth)
• Tailwind CSS for styling
• ESLint for code linting
• shadcn/ui components support

Quick Start

To create a new project using this template:

npx create-nextjs-crud-app my-new-project

or if you prefer using Yarn:

yarn create nextjs-crud-app my-new-project

Follow the prompts to select your preferred authentication method.

Post-Installation Steps

After creating your project:

1. Navigate to your project directory:

   cd my-new-project

2. Update the .env.local file with your credentials (Supabase, Clerk, or Azure AD, depending on your chosen auth method).

3. Set up shadcn components:

   npm run setup-shadcn

   Follow the prompts to configure shadcn.

4. Install additional dependencies if needed (e.g., for Supabase Auth):

   npm install @supabase/auth-helpers-nextjs

5. Start your development server:

   npm run dev

6. Open http://localhost:3000 in your browser to see your new Next.js 14 CRUD app!

Project Structure

src/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   ├── api/
│   │   ├── auth/
│   │   │   └── [...nextauth]/
│   │   │       └── route.ts
│   │   └── [route]/
│   │       └── route.ts
│   └── (routes)/
│       └── [route]/
│           └── page.tsx
├── components/
│   └── ui/
├── lib/
│   ├── supabase.ts
│   ├── auth.ts
│   └── utils.ts
├── hooks/
├── types/
└── styles/
    └── globals.css

Authentication

This template supports multiple authentication methods:

Clerk

If you chose Clerk, update your .env.local with your Clerk credentials and refer to the Clerk documentation for Next.js integration.

NextAuth.js with Azure AD

If you chose NextAuth.js:

1. Update your .env.local with your Azure AD credentials.
2. Ensure the NextAuth API route is set up in src/app/api/auth/[...nextauth]/route.ts.
3. Use the AuthProvider component in your layout.tsx.

No Authentication

If you chose no authentication, you can implement your own auth solution or use Supabase Auth directly.

Supabase Integration

This template uses Supabase for backend operations. Update your .env.local with your Supabase credentials and refer to the Supabase documentation for Next.js integration.

Customization

• Add new API routes in the src/app/api directory.
• Create new pages in the src/app directory following Next.js 14 conventions.
• Customize the UI using Tailwind CSS and shadcn components.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.