Skip to content

NEXT.js Blog

NEXT.js starter blog with MDX, Tailwind CSS, TypeScript, pre-configured Development Environment.

RepositoryLive Demo
NEXT.js Blog

Introduction

Personal Blog has always a nice to have thing for everyone, especially for developer.

Everyone loves writing, some people love to express their voice through this way, some want to be more than a blog, they teach people how to do things right, but that's just one of those charm.

On the other side, people are starting to know us by reading our blog, right?.

Why I Made This?

I learn something while making this, for me as a Frontend dev, who spent most of my time coding in frontend tech could say it's easy to build something like this.

The problem comes when a Backend dev, or even a Fullstack dev trying to build their personal website or blog.

So to help people achive their desire of creating a personal website with blog in it, I made this to quickly speed up a personal website with blog.

Tech Stack

  • 👾 NEXT.js for the core
  • 🌀 Jotai for your app's state
  • 🧰 TypeScript for the language
  • 📝 MDX for the Blog
  • 💅 Tailwind CSS for styling
  • 🌠 Framer Motion for animation
  • 💎 Prism to highlight your code blocks

Features

  • ⚡ Fast and scalable, Static Site Generator based website, and SEO Optimization.
  • 🎯 Set your own preference, use Tailwind CSS for styling, a utility-first CSS Framework, easy to customize.
  • ✍ Use Markdown to write a blog, you simply just write a markup language and publish a new blog.
  • 💎 Syntax Highlighting support, showoff your snippets on the web, write code, and the app will give the color.

For developer, I added more features to make it easier to start developer even further.

  • 🐶 Git Hooks for automatic linting and formatting your staged files.
  • 📦 Pre-configured Development Environment, added Prettier and ESLint.
  • 🔐 Static typing with TypeScript.
  • ⚛️ Atomic design, manage your component based on atomic design principle.

Can I Personally Use This?

I build this to help people solve the problem when it comes building frontend app.

Like if you have no time to setting up things like UI and UX, then this would be fit for you.

How To Create My First Blog?

To be able to write a blog, you should know how to write in Markdown, and follow this guide if you have no idea what Markdown is.

Resource

Some resource you might want to read before getting started

Edit on GitHub