Next.js & Nhost Boilerplate

This project serves as a robust starter template for building full-stack applications. It combines the power of Next.js for the frontend with Nhost as a complete backend-as-a-service solution.

It's designed to be a foundation for future projects, providing essential features out-of-the-box, such as a basic authentication system (email and password).

Tech Stack

Framework: Next.js
Backend: Nhost (Database, GraphQL API, Auth, and more)
Styling: Tailwind CSS & Shadcn/ui
API: GraphQL
Language: TypeScript

Features

✅ Next.js App Router structure.
✅ Nhost client setup and provider.
✅ Basic authentication (Sign Up, Sign In) with email and password.
✅ GraphQL client ready to make authenticated requests.
✅ Example usage of GraphQL queries and mutations.

Getting Started

1. Nhost Backend Setup

This project requires a Nhost project for the backend.

Go to Nhost and create a new project.
After the project is created, find your Nhost Backend URL in the project dashboard.

2. Environment Variables

You need to set up your environment variables for Nhost. Create a .env.local file in the root of the project and add your Nhost Backend URL:

NEXT_PUBLIC_NHOST_BACKEND_URL=YOUR_NHOST_BACKEND_URL_HERE

3. GraphQL Configuration

To enable GraphQL code generation and IDE support, create a graphql.config.yaml file in the root of the project. This file contains sensitive credentials and is ignored by Git.

Find your GraphQL endpoint and admin secret in your Nhost project dashboard.

schema:
  - https://[your-subdomain].graphql.[your-region].nhost.run/v1:
      headers:
        x-hasura-admin-secret: YOUR_HASURA_ADMIN_SECRET
generates:
  ./src/graphql/schema.ts: # Adjust path if needed
    plugins:
      - typescript-nhost

4. Install Dependencies and Run

Once the configuration is done, you can install the dependencies and run the development server.

# Install dependencies
bun install

# Run the development server
bun dev

Open http://localhost:3000 with your browser to see the result. You can start editing the page by modifying src/app/page.tsx.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Remember to add your NEXT_PUBLIC_NHOST_BACKEND_URL environment variable to your Vercel project settings.

Check out our Next.js deployment documentation for more details.

cocodrino/next-graphql-base-repo