Skip to content

A very minimal Next.js template that uses server actions, Prisma, MongoDB, TailwindCSS, Shadcn, Zod and Next auth.

Notifications You must be signed in to change notification settings

danybeltran/nextjs-typescript-and-mongodb

Repository files navigation

A Next.js template

A Next.js app that uses Shadcn, Prisma ORM, MongoDB and Next Auth

Deploy with Vercel

Updating deps

To update the dependencies to their latest versions, run:

./scripts/update-deps.sh

Development

You need to pass an env. variable with the MongoDB connection string, as well as any variables required by next-auth:

MONGO_URI=
NEXTAUTH_SECRET=
GOOGLE_APP_CLIENT_ID=
GOOGLE_APP_CLIENT_SECRET=
NEXTAUTH_URL=

How to get these variables?


The connection string looks something like this:

mongodb+srv://<user>:<password>@cluster0.<org>.mongodb.net/<database_name>?retryWrites=true&w=majority

In your cluster, click Connect:

alt text

Under the Connect your application section, click Drivers:

alt text

Click the Copy button next to the connection string:

alt text

Replace <password> with the password for your user. Ensure any option params are URL encoded.



Use your preferred tool to generate the NEXTAUTH_SECRET hash:

Using This tool is the quickest way to generate a hash. You can change the last segment of the url to get a hash of your preferred length, such as https://generate-secret.vercel.app/44

OpenSSL :

openssl rand -base64 32

Urandom :

head -c 32 /dev/urandom | base64

Python :

import base64
import os

random_bytes = os.urandom(32)
base64_string = base64.b64encode(random_bytes).decode('utf-8')
print(base64_string)

JavaScript :

const crypto = require('crypto')

const randomBytes = crypto.randomBytes(32)
const base64String = randomBytes.toString('base64')
console.log(base64String)

You can add those variables to a .ENV file (don't forget to add it to your .gitignore file!)

Related documentation:

Live preview