DEV Community

Cover image for I have built a Next.js + MongoDB + Tailwind + TypeScript template Have a look and guide for using it.
Abhay Prajapati
Abhay Prajapati

Posted on

3 2

I have built a Next.js + MongoDB + Tailwind + TypeScript template Have a look and guide for using it.

Next.js + MongoDB + Tailwind + TypeScript template

Next.js + MongoDB + Tailwind + TypeScript template πŸ“„

πŸ€”πŸ’­ Reason for making this template

Actually, I don't like to do configuration of my project, again and again, which leads me to go out and find a template and I got one, which was officially from MongoDB.

template from MongoDB

Why I am not using that?

The template which was configured for Next.js + MongoDB;
but not for TypeScript and Tailwind.

And then what I got and πŸ’‘ for making one for myself, at that moment i don't know to make a template;
but it is very easy to make one thanks Github.

πŸ“ How to use it ?.

npx create-next-app -e https://github.com/theabhayprajapati/Next.js-TailwindCSS-MongoDB-TS with-mongo-tail-app
Enter fullscreen mode Exit fullscreen mode

Folder Structure πŸ—Ώ

Image description

Pay attention to lib folder Lib

it includes MongoDB.ts

πŸ‘·πŸΎβ€β™‚οΈ What does the MongoDB.ts do?

The Main function of this file is to get your MongoDB URL and make a function that can use anywhere where you need MongoDB access.

But in most cases you don't need to touch it; it has been πŸ§‘πŸΎβ€πŸ’» configured for you.

Things you need to 😜 perform to make use of it.

go to env.local.example add your MongoDB_URI; which you can easily get from MongoDB.

  1. After adding your MongoDB_URI, you need to run npm run dev to make sure that it works.

  2. Change the name of file env.local.example to env.local

Image description

Congo 🎊, It works.

now you can easily work with MongoDB, in Next.js

Got any issues or suggestions ?
🀝🏾Connect me on:
Twitter: πŸ•ŠοΈ@Abhayprajapati_
Github: 🐧@theabhayprajapati
Linkedin: πŸ“Œ@abhayprajaapati
Youtube: πŸ“Ί@Abhayprajapati

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay