How I built my website with Next.js

Nikhil Mohite

Nikhil Mohite / Feb 11, 2023

5 min read

I've always loved the idea of creating my own space on the internet. A digital garden where I can share what I enjoy, keep notes on different programming topics, and experiment with new tools.

Which Tech Stack?

When choosing the tech stack to use for my website, I made my decisions based on 4 things:

In the end, I settled for Nextjs, Tailwind, MDX, Prisma and TypeScript.


Nextjs is a React Framework used to build Full-Stack applications for the modern web.

Why I enjoy using Nextjs?


Tailwind is a utility-first CSS framework that allows us to style components using predefined class names.

Rapidly build modern websites without ever leaving your HTML.

I completely agree with the above statement made by Tailwind.

Tailwind was easy to pick up and it significantly improved my productivity. Some of the reasons why getting started with Tailwind was frictionless:


What is MDX?

MDX allows us to use JSX in your markdown content. We can import components, such as interactive charts or alerts, and embed them within your content.

The ability to import JSX components in markdown is great solution for creating a blog page. As of now, all my blogs are written in markdown.


Prisma is an open-source next-generation ORM(Object-Relational Mapping) used to interact with a relational database like MySQL/Postgres.

The overall complexity of building backend is reduced drastically. I can easily define my database schema in a .schema file and use Prisma Client to run queries on the database.

Furthermore, we can also make use of Prisma Studio which provides a clean interface to the database in the browser.


TypeScript is a statically typed superset of JavaScript, it essentially helps to validate the code in the browser before it runs.

Using TypeScript has saved me so many times from countless hours of debugging. Furthermore I don't have to look at the documentation as much because I can tell the requirements of any function/component right in the editor. All thanks to TypeScript.

console.log("TypeScript is Cool!");


Vercel is a platform for deployment and collaboration between developers.

It integrates seamlessly with GitHub, after every git push to your repository, Vercel will build the application and deploy it to the web. Further a link will be generated which can be shared with other collaborators for feedback.


As a person who prioritizes simplicity in design, I tend to lean towards websites that focus on content over flashy aesthetics. However, I believe that design should never be dull or uninspired. Instead, it should reflect and communicate the unique identity of a company or individual.

So I started with basic wireframe in Figma. Looked at some references, YouTube videos and many other resources.

Few points which I considered when designing this website:

To add a touch of excitement and appeal to my website, I included animated highlights on the homepage. This animated feature brings attention to specific keywords, adding an element of delight for visitors to the site.

The Future

I want this to be a space that evolves with me and provides support to others on their own journeys. I'm happy with where I'm starting, and I'm eager to see where this journey takes us.

If you have any questions, feedback or suggestions for this site, please feel free to reach out to me on Twitter or Contact form.