create-next-dashboard

Live Demo

Visit https://create-next-dashboard.vercel.app. You can use these credentials to login and access protected routes:

Email: [e-mail]
Password: 12345678

NPX Command

Setup a local deployment using this npx command:

npx create-next-dashboard my-app

Usage

1. Create your .env file and provide these variables:

JWT_SECRET = // Pass-phrase to encode JWT tokens
MONGO_ATLAS_URI = // MongoDB Atlas Cloud Database Server URL, See database section below
NEXT_PUBLIC_URL = 'http://localhost:3000'

2. You only need to provide your SMTP credentials obtained from your Email provider in .env to enable Email features. Registering and authentication will face issues if these variables are not provided.

MAIL_SMTP_HOST =
MAIL_SMTP_USER =
MAIL_SMTP_PASS =
MAIL_SMTP_PORT =
MAIL_SMTP_SECURE = // Boolean
MAIL_SMTP_TLS_REJECT_UNAUTHORIZED = // Boolean
MAIL_SMTP_TLS_CIPHER =
MAIL_SMTP_SERVICE =
MAIL_SMTP_VERBOSE = // Boolean, Nodemailer will log details if true

Not all of these variables are required. For example if you're using Gmail you only need these variables:

MAIL_SMTP_USER = // Your Gmail Address
MAIL_SMTP_PASS = // Google App Password
MAIL_SMTP_SERVICE = 'Gmail'

3. Run npm run dev, the app should be running in localhost:3000!

Content & Config

All configs and contents are located inside the config folder.

Deployment

Refer to Next.js Deployment Documentation to find the best deployment strategy for you.

Authentication

Authentication is implemented using httpOnly cookies served from serverless API functions.

Database

You can spin up a MongoDB database instance using MongoDB Atlas. Provide the MOGNO_ATLAS_URI in .env.

Google Analytics

You only need to provide your NEXT_PUBLIC_GOOGLE_ANALYTICS_ID in .env file to activate your Google Analytics.

i18n

You provide the list of languages you are willing to support in next.config.js file. All of the i18n content is located in the i18n.content.js file in config directory.

If you want to disable i18n & the select language dropdown in the Header, you only need to remove the i18n key from next.config.js. In this case the en content from the i18n.config.js file will be served as default.

Sending Emails

Composing and sending Email templates is handled using Angra.