English | 简体中文

Tailwind Nextjs TypeScript Starter Blog

Blogging starter template based on Tailwind + Next.js + TypeScript.

Features

• 🦄 Next.js with TypeScript
• 💎 Easy styling customization with Tailwind CSS
• 🌱 Tagged classnames based on tagged-classnames-free
• ☀️ Light and 🌘 dark theme
• 😎 Content management based on MDX with Contentlayer
• 🚀 SEO first
  • Calculates and event callbacks optimize for idle-until-urgent pattern as much as possible based on idlization
  • LazyFramerMotion component
• 📊 Analytics based on analytics
• ❤️ Heti post layout (for Chinese)
• 🎈 Pure CSS icons based on tailwindcss-plugin-iconify

Developers experience (DX) based on:

• ESLint
• Prettier
• commitlint

Initialized by @jannajs/lint.

Usage

• Use this template or fork this repo
• Custom your data, includes:
  • metadata.ts
  • menu.ts
  • projects.ts
  • logo.svg
  • Self-introduction
  • npm run compose to draft a blog post
  • npm run dev to watch changes instantly

Moreover, you can custom your favicons and remove others example files.

Deploy

You'd better to choose Vercel, because of some API functions.

Motivation

In an interview article with the React core developers, I read that he recommended newcomers to get started with Next.js. As an old React developer, It's hard to justify not knowing about Next.js, I recently decided to start my own blog template, the previous Hexo template felt like a mental burden and didn't have much motivation to blog well. With the React framework, we can do a lot of things. In addition to the recent Vite and Windi CSS has been more familiar, just take this as an opportunity to do a Next.js and Vite in-depth experience.

I originally thought that started from ZERO, the workload or too screaming after short thinking. After all, the goal is to make my blog again after the template works well. Finally found timlrx/tailwind-nextjs-starter-blog, a Tailwind + Nextjs template, I wanted to migrate to Windi CSS, but it was not easy to grasp the workload when I was not familiar with the project, so I thought it would be better to take this opportunity to Tailwind and have a deep experience. And because the project's support for TypeScript isn't complete enough, As a TypeScript enthusiast, even though I'm a mediocre type gymnast _(:з」∠)_ Therefore, a more comprehensive TypeScript support is made based on this template.