DOCSEARCHbyAlgolia
Submit Docs

Clerk Next.js Auth Starter Template

repository·main·Indexed 19 days ago

https://github.com/clerk/nextjs-auth-starter-template

A starter template for Next.js (App Router) applications integrating Clerk for authentication and user management. Features include sign-in and sign-up flows, protected page logic, support for Clerk Organizations, and UI components styled with Tailwind CSS.

Tokens
491
Snippets
1
Records
5
Agent score
15%

What's inside clerk-nextjs-auth-starter-template

  1. Overview of the Next.js Clerk starter template

    main

    This template provides a pre-configured Next.js (App Router) application demonstrating Clerk's authentication and user management capabilities.

    Key features included in this template:

    • Auth Flow: Fully functional sign-in, sign-up, and protected page logic.
    • Customization: Clerk components styled with Tailwind CSS.
    • Data Access: Hooks for accessing user data and authentication state.
    • Multi-tenancy: Support for Clerk Organizations.

  2. Understand the structure of the template directory

    main
    The app/_template directory contains all the boilerplate and starter code specific to the Clerk + Next.js integration. This directory is intentionally isolated so that once you have initialized your project and understood the implementation, you can easily remove it to begin building your custom application without leaving behind unused template files.

  3. Configure Clerk environment variables

    main
    Before running the application, you must configure the required Clerk environment variables. You can find the required keys in the .env.example file within the repository. These variables must be set in your local environment or your deployment platform (e.g., Vercel) to connect the application to your Clerk instance.

  4. Run the Next.js Clerk starter template locally

    main

    To run this template on your local machine, follow these steps:

    1. Clone the repository:
      git clone https://github.com/clerk/clerk-nextjs-demo-app-router
    2. Set up Clerk:
    git clone https://github.com/clerk/clerk-nextjs-demo-app-router

pnpm install
pnpm run dev