Skip to Content

Quick Setup 🚀

NextStack is the boilerplate with the quickest setup. This short page is all you need to do to have the basics running.

Requirements

  1. Have Node  installed.
  2. Have Bun  installed.
  3. Have a Vercel  account.
  4. Have a domain for your project. Porkbun  is the most recommended way to get one. See alternatives.

Project Setup

  1. Clone or fork the NextStack repository  (access to it is granted when purchased) and create a new GitHub repository for your using it.
  2. On a terminal on that project, run bunx vercel link to create a new Vercel project and to link it to this repository. This command should be run again if you are cloning the project to a new machine.
  3. Run bunx vercel env add NEXT_PUBLIC_PRODUCTION_DOMAIN production and then paste your full URL (e.g. https://nextstack.gg).

Neon - Database

  1. Install the Neon integration. Check the Specific Project and select your project and proceed with the installation and with the DB creation.

Resend - Email sending

  1. Connect Account in the Resend integration. Select the domain you own. Press the button to save the Environment Variable.
  2. Run bunx vercel env add NEXT_PUBLIC_EMAIL_DOMAIN, select all the environments, and paste the email domain you own (e.g. nextstack.gg).

Better Auth - Authentication

  1. Run bun ./tools/addBetterAuthSecrets.ts. This is a TS util script to quickly add the required random secret keys for Better Auth. Feel free to read this file before running it!

Umami - Analytics

  1. Create an account in Umami  and create a new website. Copy the Website ID and run bunx vercel env add NEXT_PUBLIC_UMAMI_ID and paste the ID when prompted. Select Production.
  2. To keep production and development data separated, create another website (with a domain like localhost:3000, although the domain is purely visual), copy the Website ID, and run bunx vercel env add NEXT_PUBLIC_UMAMI_ID and paste the ID when prompted. Select Preview and Development.

Basics done!

  1. Run bun env to create/update the .env file using the values from Vercel/Next.js. This script runs bunx vercel env pull .env. We use .env instead of the default .env.local so other tools such as Drizzle can read it without further setup.
  2. Run bun db:migrate to apply the default migrations to the database.
  3. Run bun dev to check if everything is correct! If there are missing envs, it will complain. bun i is automatically run when we run bun dev.

Further Setup

  1. Enable Vercel’s Fluid Compute for better performance at no extra cost. It will eventually be enabled by default: Access https://vercel.com/fluid  and press Enable Fluid and then enable it.
    • In the same page, click on Advanced Settings, Function Region, and select the same / the nearest region of your database.
    • If you don’t want to enable the Fluid Compute, change the Function Max Duration in the Advanced Settings to 60s (default is 10s) to avoid errors due to downtimes a service might have.
  2. Change the /src/lib/consts.ts, /src/server/serverConsts.ts, and the /src/lib/ui/theme.ts files as you wish.
  3. Read the other pages in this documentation, especially the Polar or the Stripe pages to setup the payment system.

Useful commands

  • bun dev - Runs the Next.js server. Also runs bun i to install deps and runs TypeScript on watch mode to catch type errors in the whole project.
  • bun db:studio opens an UI explorer for your DB.
  • bun db:generate and then bun db:migrate after changing your DB schemas.

Info

  • This template uses both ESLint  and Biome  (by using my eslint-config-biome ). Both have VSCode extensions which will be suggested to be installed when you open the project (defined on .vscode/extensions.json). It also comes with a .vscode/settings.json which automatically applies the ESLint and Biome fixes when the file is saved.
Last updated on