cathykc / next-fullstack

🚲 next-fullstack

A boilerplate for developing full-stack applications with Next.js

Check out the demo 📎

This full-stack boilerplates comes with Sequelize (a Node.js ORM), Tailwind CSS (utility-first CSS framework), and basic authentication with NextAuth.js. Minimal setup is needed to deploy a basic CRUD application.

The entire boilerplate is written in Typescript and is set up with pre-commit hooks that compiles Typescript and runs prettier (code formatter).

From cloning to deploying, a step by step guide

Follow along to get your own version of this boilerplate deployed on Vercel.

Fork and clone repository

Fork the repository into your own account then clone the fork to your local development environment.

git clone [email protected]:[USERNAME]/next-fullstack.git

Install dependencies

yarn install

Set up local environment variable

The environment variables required by this boilerplate can be seen in .env.example. Create a local environment variable file:

cp .env.example .env.local

We'll be setting up a database and also OAuth providers in upcoming steps to get values for these variables.

Create a Postgres database

You can create a Postgres database with any service provider. Make sure it is publicly accessible and is password authenticated.

See example settings for creating an AWS RDS Postgres database.

After creation, compose the database URL and update your local environment variable file (.env.local)

DATABASE_URL=postgres://[USERNAME]:[PASSWORD]@[HOST]:[PORT]/postgres

Run migrations

Create tables users and posts.

yarn sequelize-cli db:migrate

These are example models and tables. Feel free to roll back (yarn sequelize-cli db:migrate:undo) and write your own migrations after you have the basic boilerplate up and running.

Set up OAuth providers

The boilerplate comes set up with Github and Google as OAuth providers, however you are free to remove or add your own by editing the provider entries in the [next-auth].ts file and adding the relevant environment variables.

Setting up Google OAuth
Setting up Github OAuth

Update environment variables with your OAuth client ID and secret. e.g. for Github:

GITHUB_CLIENT_ID=[GITHUB_CLIENT_ID]
GITHUB_CLIENT_SECRET=[GITHUB_CLIENT_SECRET]

Run locally

yarn dev

Go to localhost:3000!

Deploy to Vercel

Applications developed from this boilerplate can be hosted anywhere. These instructions are for deploying via Vercel.

1. Import your project from Github
2. Set your environment variables - you won't know what API_URL and NEXTAUTH_URL will be until after your first deploy. Vercel will issue your project a unique domain.

3. After deployment grab the domain and update the API_URL and NEXTAUTH_URL environment variables.
4. Redeploy for new variable to take effect (you can trigger this by pushing to master).

Contributing

🐛 Submit a bug | 🐥 Submit a feature request

Review & deployment

Create a PR describing the change you've made and someone will be along to review it and get it merged to master. After changes are merged to master, we'll trigger a production deployment to https://next-fullstack-demo.vercel.app/.

Maintainers

Hi! We're Cathy, Stedman, and Zain. Feel free email us at [email protected]! 👋

License

This project is licensed under the terms of the Apache-2.0.