Nhost Vercel Starter Template - experimental app

This is an example frontend for the multi-conference example app created with Nhost. It uses Next.js with edge and app exprimental features, GraphQLRequest with Codegen with client preset, Tailwind, Nhost as the backend (authentication, Postgres Database, GraphQL API) and Vercel to host the frontend.

This is comes from original repository nhost-netlify-starter-nextjs-reactquery.

Features
Previews
Project Structure Walkthrough
Getting Started
- Setting up local frontend
- Setting up local backend with the Nhost CLI
GraphQL API Schema and Example Queries
Deploy to Nhost
Deploy to Vercel

Features

Next.js
Tailwind v3 for styling.
TypeScript static type-safety.
ESLint linting & Prettier code formatting.
GraphQL and GraphQL Code Generator - with client preset.

Previews

Front-end: https://nhost-vercel-starter-nexjs-experimental.vercel.app/

Project Structure Walkthrough

Inside this project, you are going to see both the specification for the backend (Nhost) and the frontend (Next.js):

/
├── nhost/
├── .nhost/
├── src/
│   ├── app/
│   |   └── *.tsx
│   ├── components/
│   │   ├── common/
│   |   ├── conferences/
│   |   ├── speakers/
│   |   └── talks/
│   ├── graphql/
│   │   └── *.gql
│   ├── lib/
│   │   ├── gql/
│   │   │   └── *.ts (auto-generated GraphQL hooks from client preset)
│   │   └── service/
│   │       └── client.ts (GraphQLRequest client)
│   └── utils/
│       └── *.ts
└── package.json

nhost is the main specification of your backend: tables, permissions & roles.
.nhost is a folder created by the CLI that contains the state of your backend.
src is the main folder for your frontend.
src/components contains all the components used in the application.
src/graphql contains all the hooks for GraphQL queries and mutations used in the application.
src/app contains all the pages used in the application.
src/lib contains all for GrapQL operation.
src/utils contains all the utility functions used in the application.

Getting Started

Setting up local frontend

Clone the repository:

git clone https://github.com/suplere/nhost-vercel-starter-nexjs-experimental

Install the dependencies:

pnpm install

Start the Next.js application:

pnpm dev

Setting up local backend with the Nhost CLI

When you start developing your front-end you will see that there's data already preloaded. This is coming from an environment Nhost has prepared to run the conference project. In order to make changes to the backend (tables, columns, permissions, etc...) you need to start a local Nhost environment yourself.

You must install Docker before you can use the Nhost CLI. Make sure to have Docker running before proceeding.
Install the Nhost CLI:

sudo curl -L https://raw.githubusercontent.com/nhost/cli/main/get.sh | bash

Start the Nhost project:

pnpm dev:nhost

The CLI uses seed data (nhost/seed) to populate the database with a user and a conference. Learn more in the Nhost CLI documentation.

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

NEXT_PUBLIC_NHOST_SUBDOMAIN=localhost
NEXT_PUBLIC_NHOST_REGION=
NEXT_PUBLIC_HASURA_GRAPHQL_URL=http://localhost:1337/v1/graphql

Start (or restart) the Next.js application:

pnpm dev

You'll see that the data is now coming from your local Nhost environment. Add conferences either through the Hasura Console or through the conference management page on the front-end by signing in.

You can use the following credentials to manage conferences:

email: manager@conferenceplatform.com
password: Manager1234!

GraphQL API Schema and Example Queries

fragment ConferenceSpeakersListItem on speakers {
  name
  id
  social
  job_description
  avatar_url
  bio
}

fragment ConferenceTalkSpeaker on speakers {
  name
  id
  social
  job_description
  avatar_url
  bio
}

fragment ConferenceTalksListItem on talks {
  id
  name
  start_date
  end_date
  speaker {
    ...ConferenceTalkSpeaker
  }
}

fragment ConferenceFull on conferences {
  id
  name
  slug
  location
  featured
  start_date
  end_date
  talks(order_by: { start_date: asc }) {
    ...ConferenceTalksListItem
  }
  speakers {
    ...ConferenceSpeakersListItem
  }
}

query ConferenceBySlug($slug: String!) {
  conferences(where: { slug: { _eq: $slug } }) {
    ...ConferenceFull
  }
}

Queries and mutations defined in the src/graphql folder can be used in the front-end by generating the GraphQL hooks with the following command:

pnpm codegen

This will generate the hooks in src/lib/gql/.

Deploy to Nhost

Nhost is an open source Firebase alternative with GraphQL. More importantly, by creating a project with Nhost you automatically get the following:

- Database: PostgreSQL.
- Instant GraphQL API: Hasura.
- Authentication: Hasura Auth.
- Storage: Hasura Storage.
- Serverless Functions: AWS Lambdas.

Steps for creating an Nhost project

Next, give your new Nhost app a name, select a geographic region for your Nhost services and click Create App.

After a few seconds, you should get a PostgreSQL database, a GraphQL API with Hasura, file storage, and authentication set up.

(Optional): Any user you add to the project through the "Users" section of the Nhost Dashboard can access the manager dashboard of the conference project. You'll need to verify the email address of the user before they can sign in.

Learn more about email verification in the Nhost documentation.

Connecting this repository to Nhost

Nhost supports a Git workflow which means that you can safely work locally with the CLI and when you are ~~confident~~ with your changes, you can push to your repository and your project will be automatically deployed (any following updates you push to your code will also be automatically be deployed.) To allow this, you need to connect this repository to your Nhost projects through the Nhost Dashboard:

Fork/clone this repository to your GitHub account.
Provide the required permissions to select this repository for the official Nhost GitHub application.
Find your repository on the Nhost Dashboard & connect it:

Once connected, the project will automatically deploy.

Add changes to your project. Any changes you push to your repository will also be automatically be deployed (you can see your deployments on the "Deployments" section of the console).

And now once you're ready to deploy your frontend make sure to go back to the app overview and grab your Nhost Subdomain and Nhost Region:

Deploy to Vercel

You choose your Github repository with this project. I use this settings:

Build Command: next build

Install Commande: pnpm install

Next you must setup Environment Variables:

NEXT_PUBLIC_NHOST_SUBDOMAIN=YOUR_NHOST_APP_SUBDOMAIN
NEXT_PUBLIC_NHOST_REGION=YOUR_NHOST_APP_REGION
NEXT_PUBLIC_HASURA_GRAPHQL_URL=YOUR_NHOST_APP_NHOST_GRAPHQL_URL

suplere/nhost-vercel-starter-nexjs-experimental