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

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more