Convert Figma logo to code with AI

timlrx logotailwind-nextjs-starter-blog

This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.

8,693
2,025
8,693
47
View on GitHub

Top Related Projects

vercel's avatar

next.js

124,777

The React Framework

theodorusclarence's avatar

ts-nextjs-tailwind-starter

2,920

🔋 Next.js + Tailwind CSS + TypeScript starter and boilerplate packed with useful development features

shadcn-ui's avatar

taxonomy

18,492

An open source application built using the new router, server components and everything new in Next.js 13.

leerob's avatar

site

7,144

My site built with Next.js, Tailwind, and Vercel.

bchiang7's avatar

v4

7,538

Fourth iteration of my personal website built with Gatsby

Quick Overview

Tailwind NextJS Starter Blog is a highly customizable and feature-rich blog template built with Next.js, Tailwind CSS, and MDX. It provides a solid foundation for creating modern, performant, and SEO-friendly blogs with minimal setup required.

Pros

  • Easy to set up and customize with minimal configuration
  • Built-in dark mode and excellent responsive design
  • SEO-friendly with support for tags, RSS feed, and sitemap generation
  • Excellent performance and accessibility scores out of the box

Cons

  • May require some familiarity with Next.js and Tailwind CSS for advanced customization
  • Limited built-in themes, requiring more effort for significant design changes
  • Potential learning curve for developers new to MDX or static site generation

Code Examples

  1. Creating a new blog post:
---
title: 'My First Blog Post'
date: '2023-05-01'
tags: ['nextjs', 'tailwind']
draft: false
summary: 'This is my first blog post using the Tailwind NextJS Starter Blog'
---

# Welcome to my blog!

This is the content of my first blog post. You can use **Markdown** and even React components here.

<CustomComponent />
  1. Customizing the site configuration:
// data/siteMetadata.js
const siteMetadata = {
  title: 'My Awesome Blog',
  author: 'John Doe',
  headerTitle: 'My Blog',
  description: 'A blog created with Next.js and Tailwind.css',
  language: 'en-us',
  siteUrl: 'https://yourdomain.com',
  siteRepo: 'https://github.com/yourusername/your-repo',
  // ... other configuration options
}

export default siteMetadata
  1. Adding a custom component to the MDX provider:
// components/MDXComponents.js
import Image from 'next/image'
import CustomComponent from './CustomComponent'

const MDXComponents = {
  Image,
  CustomComponent,
  // Add other custom components here
}

export default MDXComponents

Getting Started

  1. Clone the repository:

    git clone https://github.com/timlrx/tailwind-nextjs-starter-blog.git my-blog

  2. Install dependencies:

    cd my-blog
npm install

  3. Customize the data/siteMetadata.js file with your information.

  4. Start the development server:

    npm run dev

  5. Create new blog posts in the data/blog directory using MDX format.

  6. Build and deploy your blog:

    npm run build
npm run start

Competitor Comparisons

vercel logo

next.js

124,777

The React Framework

Pros of Next.js

  • More comprehensive framework with broader ecosystem support
  • Better performance optimization and server-side rendering capabilities
  • Extensive documentation and community resources

Cons of Next.js

  • Steeper learning curve for beginners
  • Less opinionated, requiring more setup for specific use cases
  • May include unnecessary features for simple blog projects

Code Comparison

Next.js (Pages Router):

// pages/index.js
export default function Home() {
  return <h1>Welcome to Next.js!</h1>
}

Tailwind NextJS Starter Blog:

// pages/index.js
import { PageSEO } from '@/components/SEO'
import siteMetadata from '@/data/siteMetadata'
import { getAllFilesFrontMatter } from '@/lib/mdx'
import ListLayout from '@/layouts/ListLayout'

export const POSTS_PER_PAGE = 5

export async function getStaticProps() {
  const posts = await getAllFilesFrontMatter('blog')
  const initialDisplayPosts = posts.slice(0, POSTS_PER_PAGE)
  const pagination = {
    currentPage: 1,
    totalPages: Math.ceil(posts.length / POSTS_PER_PAGE),
  }

  return { props: { initialDisplayPosts, posts, pagination } }
}

export default function Home({ posts, initialDisplayPosts, pagination }) {
  return (
    <>
      <PageSEO title={siteMetadata.title} description={siteMetadata.description} />
      <ListLayout
        posts={posts}
        initialDisplayPosts={initialDisplayPosts}
        pagination={pagination}
        title="All Posts"
      />
    </>
  )
}

The Tailwind NextJS Starter Blog provides a more opinionated and feature-rich starting point for blog projects, while Next.js offers a flexible foundation for various web applications.

theodorusclarence logo

ts-nextjs-tailwind-starter

2,920

🔋 Next.js + Tailwind CSS + TypeScript starter and boilerplate packed with useful development features

Pros of ts-nextjs-tailwind-starter

  • Includes TypeScript support out of the box, providing better type safety and developer experience
  • Offers a more comprehensive set of pre-configured tools, including Absolute Import, Seo, and Error Boundary
  • Provides a more structured project layout with separate components and hooks directories

Cons of ts-nextjs-tailwind-starter

  • Less focused on blogging functionality compared to tailwind-nextjs-starter-blog
  • May have a steeper learning curve due to additional tools and TypeScript integration
  • Lacks built-in MDX support and content management features

Code Comparison

tailwind-nextjs-starter-blog:

import Link from '@/components/Link'
import Tag from '@/components/Tag'
import siteMetadata from '@/data/siteMetadata'
import { useState } from 'react'
import Pagination from '@/components/Pagination'

ts-nextjs-tailwind-starter:

import * as React from 'react'
import { RiAlarmWarningFill } from 'react-icons/ri'

import Layout from '@/components/layout/Layout'
import ArrowLink from '@/components/links/ArrowLink'
import Seo from '@/components/Seo'

The code snippets show differences in import statements and component structure. ts-nextjs-tailwind-starter uses TypeScript and includes more utility components, while tailwind-nextjs-starter-blog focuses on blog-specific components.

shadcn-ui logo

taxonomy

18,492

An open source application built using the new router, server components and everything new in Next.js 13.

Pros of Taxonomy

  • More comprehensive UI components and design system
  • Built-in dark mode support and customizable themes
  • Includes a full-featured blog and documentation site

Cons of Taxonomy

  • Steeper learning curve due to more complex architecture
  • Less focused on blogging specifically
  • May require more setup and configuration

Code Comparison

Taxonomy (component usage):

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
</Card>

Tailwind NextJS Starter Blog (blog post layout):

<article>
  <div className="xl:divide-y xl:divide-gray-200 xl:dark:divide-gray-700">
    <header className="pt-6 xl:pb-6">
      <div className="space-y-1 text-center">
        <dl className="space-y-10">
          <div>
            <dt className="sr-only">Published on</dt>
            <dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
              <time dateTime={date}>{formatDate(date)}</time>
            </dd>
          </div>
        </dl>
        <div>
          <PageTitle>{title}</PageTitle>
        </div>
      </div>
    </header>
    <div className="divide-y divide-gray-200 pb-8 dark:divide-gray-700 xl:grid xl:grid-cols-4 xl:gap-x-6 xl:divide-y-0">
      <dl className="pt-6 pb-10 xl:border-b xl:border-gray-200 xl:pt-11 xl:dark:border-gray-700">
        <dt className="sr-only">Authors</dt>
        <dd>
          <ul className="flex justify-center space-x-8 sm:space-x-12 xl:block xl:space-x-0 xl:space-y-8">
            {authorDetails.map((author) => (
              <li className="flex items-center space-x-2" key={author.name}>
                {author.avatar && (
                  <Image
                    src={author.avatar}
                    width={38}
                    height={38}
                    alt="avatar"
                    className="h-10 w-10 rounded-full"
                  />
                )}
                <dl className="whitespace-nowrap text-sm font-medium leading-5">
                  <dt className="sr-only">Name</dt>
                  <dd className="text-gray-900 dark:text-gray-100">{author.name}</dd>
                  <dt className="sr-only">Twitter</dt>
                  <dd>
                    {author.twitter && (
                      <Link
                        href={author.twitter}
                        className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
                      >
                        {author.twitter.replace('https://twitter.com/', '@')}
                      </Link>
                    )}
                  </dd>
                </dl>
              </li>
            ))}
          </ul>
        </dd>
      </dl>
      <div className="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0">
        <div className="prose max-w-none pt-10 pb-8 dark:prose-dark">{children}</div>
        <div className="pt-6 pb-6 text-sm text-gray-700 dark:text-gray-300">
          <Link href={discussUrl(slug)} rel="nofollow">
            {'Discuss on Twitter'}
          </Link>
          {` • `}
          <Link href={editUrl(fileName)}>{'View on GitHub'}</Link>
        </div>
leerob logo

site

7,144

My site built with Next.js, Tailwind, and Vercel.

Pros of site

  • More comprehensive and feature-rich, including a dashboard and analytics
  • Utilizes modern technologies like Next.js 13 App Router and React Server Components
  • Includes a custom MDX remote plugin for enhanced content rendering

Cons of site

  • More complex and potentially harder to customize for beginners
  • Less focused on blogging specifically, as it's a personal website with multiple features
  • May require more setup and configuration due to its advanced features

Code Comparison

site:

import { MDXRemote } from 'next-mdx-remote/rsc';
import { getTweetMetadata } from 'lib/twitter';
import { Tweet } from 'react-tweet';

const components = {
  Tweet,
};

tailwind-nextjs-starter-blog:

import { MDXLayoutRenderer } from '@/components/MDXComponents'
import { getFileBySlug } from '@/lib/mdx'

const DEFAULT_LAYOUT = 'PostLayout'

export async function getStaticProps() {
  const authorDetails = await getFileBySlug('authors', ['default'])
  return { props: { authorDetails } }
}

The code snippets highlight the different approaches to MDX rendering and content management between the two repositories. site uses a custom MDX remote plugin with React Server Components, while tailwind-nextjs-starter-blog uses a more traditional MDX rendering approach with static props.

bchiang7 logo

v4

7,538

Fourth iteration of my personal website built with Gatsby

Pros of v4

  • Custom design with unique aesthetics and animations
  • Includes a detailed "About" page with timeline and skills sections
  • Integrates with external services like Spotify for dynamic content

Cons of v4

  • Less focus on blog functionality compared to tailwind-nextjs-starter-blog
  • May require more customization for users wanting a different design
  • Potentially steeper learning curve for beginners

Code Comparison

v4 (React):

const StyledHeader = styled.header`
  ${({ theme }) => theme.mixins.flexBetween};
  position: fixed;
  top: 0;
  z-index: 11;
  padding: 0px 50px;
  width: 100%;
  height: var(--nav-height);
  background-color: rgba(10, 25, 47, 0.85);
  filter: none !important;
  pointer-events: auto !important;
  user-select: auto !important;
  backdrop-filter: blur(10px);
  transition: var(--transition);
`;

tailwind-nextjs-starter-blog (Next.js with Tailwind):

<header className="flex items-center justify-between py-10">
  <div>
    <Link href="/" aria-label={siteMetadata.headerTitle}>
      <div className="flex items-center justify-between">
        <div className="mr-3">
          <Logo />
        </div>
        {typeof siteMetadata.headerTitle === 'string' ? (
          <div className="hidden h-6 text-2xl font-semibold sm:block">
            {siteMetadata.headerTitle}
          </div>
        ) : (
          siteMetadata.headerTitle
        )}
      </div>
    </Link>
  </div>
  <div className="flex items-center text-base leading-5">
    <div className="hidden sm:block">
      {headerNavLinks.map((link) => (
        <Link
          key={link.title}
          href={link.href}
          className="p-1 font-medium text-gray-900 dark:text-gray-100 sm:p-4"
        >
          {link.title}
        </Link>
      ))}
    </div>
    <ThemeSwitch />
    <MobileNav />
  </div>
</header>

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

tailwind-nextjs-banner

Tailwind Nextjs Starter Blog

GitHub Repo stars GitHub forks Twitter URL Sponsor

Deploy with Vercel

This is a Next.js, Tailwind CSS blogging starter template. Version 2 is based on Next App directory with React Server Component and uses Contentlayer to manage markdown content.

Probably the most feature-rich Next.js markdown blogging template out there. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.

Check out the documentation below to get started.

Facing issues? Check the FAQ page and do a search on past issues. Feel free to open a new issue if none has been posted previously.

Feature request? Check the past discussions to see if it has been brought up previously. Otherwise, feel free to start a new discussion thread. All ideas are welcomed!

Variations

Note: These are community contributed forks using different frameworks or with significant changes to the codebase - not officially supported.

Astro alternative - Tailwind Astro Template.

Remix-run alternative - Tailwind Remix-run Starter Blog Template.

Internationalization support - Template with i18n and source code.

Examples V2

Using the template? Feel free to create a PR and add your blog to this list.

Examples V1

v1-blogs-showcase.webm

Thanks to the community of users and contributors to the template! We are no longer accepting new blog listings over here. If you have updated from version 1 to version 2, feel free to remove your blog from this list and add it to the one above.

Motivation

I wanted to port my existing blog to Nextjs and Tailwind CSS but there was no easy out of the box template to use so I decided to create one. Design is adapted from Tailwindlabs blog.

I wanted it to be nearly as feature-rich as popular blogging templates like beautiful-jekyll and Hugo Academic but with the best of React's ecosystem and current web development's best practices.

Features

  • Next.js with Typescript
  • Contentlayer to manage content logic
  • Easy styling customization with Tailwind 3.0 and primary color attribute
  • MDX - write JSX in markdown documents!
  • Near perfect lighthouse score - Lighthouse report
  • Lightweight, 85kB first load JS
  • Mobile-friendly view
  • Light and dark theme
  • Font optimization with next/font
  • Integration with pliny that provides:
    • Multiple analytics options including Umami, Plausible, Simple Analytics, Posthog and Google Analytics
    • Comments via Giscus, Utterances or Disqus
    • Newsletter API and component with support for Mailchimp, Buttondown, Convertkit, Klaviyo, Revue, Emailoctopus and Beehiiv
    • Command palette search with Kbar or Algolia
  • Server-side syntax highlighting with line numbers and line highlighting via rehype-prism-plus
  • Math display supported via KaTeX
  • Citation and bibliography support via rehype-citation
  • Github alerts via remark-github-blockquote-alert
  • Automatic image optimization via next/image
  • Support for tags - each unique tag will be its own page
  • Support for multiple authors
  • 3 different blog layouts
  • 2 different blog listing layouts
  • Support for nested routing of blog posts
  • Projects page
  • Preconfigured security headers
  • SEO friendly with RSS feed, sitemaps and more!

Sample posts

Quick Start Guide

  1. Clone the repo
npx degit 'timlrx/tailwind-nextjs-starter-blog'
  1. Personalize siteMetadata.js (site related information)
  2. Modify the content security policy in next.config.js if you want to use other analytics provider or a commenting solution other than giscus.
  3. Personalize authors/default.md (main author)
  4. Modify projectsData.ts
  5. Modify headerNavLinks.ts to customize navigation links
  6. Add blog posts
  7. Deploy on Vercel

Installation

yarn

Please note, that if you are using Windows, you may need to run:

$env:PWD = $(Get-Location).Path

Development

First, run the development server:

yarn dev

Open http://localhost:3000 with your browser to see the result.

Edit the layout in app or content in data. With live reloading, the pages auto-updates as you edit them.

Extend / Customize

data/siteMetadata.js - contains most of the site related information which should be modified for a user's need.

data/authors/default.md - default author information (required). Additional authors can be added as files in data/authors.

data/projectsData.js - data used to generate styled card on the projects page.

data/headerNavLinks.js - navigation links.

data/logo.svg - replace with your own logo.

data/blog - replace with your own blog posts.

public/static - store assets such as images and favicons.

tailwind.config.js and css/tailwind.css - tailwind configuration and stylesheet which can be modified to change the overall look and feel of the site.

css/prism.css - controls the styles associated with the code blocks. Feel free to customize it and use your preferred prismjs theme e.g. prism themes.

contentlayer.config.ts - configuration for Contentlayer, including definition of content sources and MDX plugins used. See Contentlayer documentation for more information.

components/MDXComponents.js - pass your own JSX code or React component by specifying it over here. You can then use them directly in the .mdx or .md file. By default, a custom link, next/image component, table of contents component and Newsletter form are passed down. Note that the components should be default exported to avoid existing issues with Next.js.

layouts - main templates used in pages:

  • There are currently 3 post layouts available: PostLayout, PostSimple and PostBanner. PostLayout is the default 2 column layout with meta and author information. PostSimple is a simplified version of PostLayout, while PostBanner features a banner image.
  • There are 2 blog listing layouts: ListLayout, the layout used in version 1 of the template with a search bar and ListLayoutWithTags, currently used in version 2, which omits the search bar but includes a sidebar with information on the tags.

app - pages to route to. Read the Next.js documentation for more information.

next.config.js - configuration related to Next.js. You need to adapt the Content Security Policy if you want to load scripts, images etc. from other domains.

Post

Content is modelled using Contentlayer, which allows you to define your own content schema and use it to generate typed content objects. See Contentlayer documentation for more information.

Frontmatter

Frontmatter follows Hugo's standards.

Please refer to contentlayer.config.ts for an up to date list of supported fields. The following fields are supported:

title (required)
date (required)
tags (optional)
lastmod (optional)
draft (optional)
summary (optional)
images (optional)
authors (optional list which should correspond to the file names in `data/authors`. Uses `default` if none is specified)
layout (optional list which should correspond to the file names in `data/layouts`)
canonicalUrl (optional, canonical url for the post for SEO)

Here's an example of a post's frontmatter:

---
title: 'Introducing Tailwind Nexjs Starter Blog'
date: '2021-01-12'
lastmod: '2021-01-18'
tags: ['next-js', 'tailwind', 'guide']
draft: false
summary: 'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.'
images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg']
authors: ['default', 'sparrowhawk']
layout: PostLayout
canonicalUrl: https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog
---

Deploy

GitHub Pages

A pages.yml workflow is already provided. Simply select "GitHub Actions" in: Settings > Pages > Build and deployment > Source.

Vercel

The easiest way to deploy the template is to deploy on Vercel. Check out the Next.js deployment documentation for more details.

Netlify

Netlify’s Next.js runtime configures enables key Next.js functionality on your website without the need for additional configurations. Netlify generates serverless functions that will handle Next.js functionalities such as server-side rendered (SSR) pages, incremental static regeneration (ISR), next/images, etc.

See Next.js on Netlify for suggested configuration values and more details.

Static hosting services (GitHub Pages / S3 / Firebase etc.)

Run:

$ EXPORT=1 UNOPTIMIZED=1 yarn build

Then, deploy the generated out folder or run npx serve out it locally.

[!IMPORTANT] If deploying with a URL base path, like https://example.org/myblog you need an extra BASE_PATH shell-var to the build command:

$ EXPORT=1 UNOPTIMIZED=1 BASE_PATH=/myblog yarn build

=> In your code, ${process.env.BASE_PATH || ''}/robots.txt will print "/myblog/robots.txt" in the out build (or only /robots.txt if yarn dev, ie: on localhost:3000)

[!TIP] Alternatively to UNOPTIMIZED=1, to continue using next/image, you can use an alternative image optimization provider such as Imgix, Cloudinary or Akamai. See image optimization documentation for more details.

Consider removing the following features that cannot be used in a static build:

  1. Comment out headers() from next.config.js.
  2. Remove api folder and components which call the server-side function such as the Newsletter component. Not technically required and the site will build successfully, but the APIs cannot be used as they are server-side functions.

Frequently Asked Questions

Support

Using the template? Support this effort by giving a star on GitHub, sharing your own blog and giving a shoutout on Twitter or becoming a project sponsor.

Licence

MIT © Timothy Lin