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

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

Β·

2 min read

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

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

Did you find this article valuable?

Support @Abhay's Blog by becoming a sponsor. Any amount is appreciated!

Β