A Next.js blog template that swapped Contentlayer for Velite

A blog starter with a tutorial attached

The project describes itself as a way to build an SEO optimized personal blog website with Next.js, Tailwind CSS and Contentlayer, and it points to a video tutorial for anyone who wants to learn to create it that way.

That framing explains the shape of the repository. This is not a product with a feature roadmap, it is a teaching artefact that also works as a starting point. There is a live demo at create-blog-with-nextjs.vercel.app, a separate starter code repository, and the author's own blog built on it at devdreaming.com, which is the most useful reference of the three because it shows what the template looks like once somebody has actually used it.

The images in the README give the other half of the picture. There are pages for Home, About and Contact, and a set of project images for the blog pages themselves. So the template covers the standard personal blog shape, a landing page, an about page, a contact page with a form, and the post pages with a listing.

The primary language of the repository is listed as MDX, which is a clue about how the content is written, and the topics name the whole stack: nextjs, nextjs13, tailwindcss, contentlayer, markdown, nextjs-contentlayer and nextjs-markdown-tailwind-blog.

The 2026 refresh moved the whole stack forward

The modernization update is the most important section of the README for anyone picking this up today, and it is a substantial one.

Bun is now the package manager, with bun install, bun dev and bun run build. Next.js 16 uses Turbopack as the default for both dev and build, and React 19 sits on top. Tailwind CSS v4 arrived with a CSS first configuration in src/app/globals.css using @theme, @custom-variant dark and @plugin, and the tailwind.config.js file was removed, with @tailwindcss/postcss taking over from autoprefixer. ESLint 10 uses a flat config in eslint.config.mjs with next/core-web-vitals.

The content and syntax highlighting stack moved too, to Shiki 4 with the latest rehype-pretty-code, plus velite, @supabase/supabase-js, react-hook-form, next-sitemap, sharp and the rehype and remark plugins.

Two consequences of the Turbopack move are worth calling out. Velite now runs as a predev and prebuild script, because Turbopack does not support the old custom webpack plugin. And dynamic routes moved to async params for Next 16.

The README also tells you where the old code went, which is a courtesy that costs the author nothing. The pre update code is preserved in git history, with commit 186f9ee named as the point to check out for the original Next.js 15, Tailwind v3 and ESLint 9 setup that matches the tutorial.

Velite replaced Contentlayer, and the old path is a branch

The note near the top of the README explains the single most consequential change. In the YouTube tutorial the author used Contentlayer for the markdown files, but since Contentlayer is not actively maintained, the author switched to Velite.js.

If you want the Contentlayer version, there is a branch for it, the Contentlayer branch of the same repository. That is the practical fork in the road for anyone following the video.

The difference is not only the tool name. Velite is wired into the build as a predev and prebuild step that runs velite build --clean, and there is a separate content script and a content:watch script for the watch mode. The velite.config.js file at the repository root holds that configuration, and velite is a dev dependency at version 0.4.0.

The dependency list also shows what a modern MDX blog needs beyond the framework. remark-gfm for GitHub flavoured markdown, rehype-slug and rehype-autolink-headings for heading anchors, rehype-pretty-code with Shiki 4 for syntax highlighting, reading-time for the per post estimate, github-slugger for slugs, and date-fns for dates. The @lottiefiles/dotlottie-react package is there for the Lottie animation on the contact page, and @supabase/supabase-js plus react-hook-form are for the contact form.

The package scripts show the whole build order

The package manifest is where the mechanics of the template are clearest. The project is named developer-blog-starter-code at version 0.1.0, it is private, and the package manager is pinned to [email protected] with Node 22 or newer required through the engines field.

The scripts show the order the build runs in:

  "scripts": {
    "predev": "velite build --clean",
    "dev": "next dev",
    "prebuild": "velite build --clean",
    "build": "next build",
    "postbuild": "next-sitemap",
    "start": "next start",
    "lint": "eslint .",
    "content": "velite --clean",
    "content:watch": "velite --watch"
  },

Two things are worth noting. The content build runs before both dev and build, because the MDX content has to be compiled into something the app can import. And the sitemap is generated after the build rather than during it, so next-sitemap reads the finished output, which is why postbuild is the right hook for it.

The Tailwind packages tell you what the styling is built on, with @tailwindcss/forms, @tailwindcss/typography and @tailwindcss/postcss alongside tailwindcss itself, and the dev dependencies add sharp for image processing and the encoding package, with unrs-resolver listed as a trusted dependency.

SEO comes from the config files, not from a plugin

The repository root has a small set of files that carry the SEO work, and they are the ones to read before you start editing.

There is next-sitemap.config.js, and the postbuild script runs next-sitemap, so a sitemap is generated on every production build rather than being something you set up by hand. The next.config.js file holds the Next.js configuration, and the content directory holds the MDX posts and the velite configuration that describes how they are turned into data.

The .env.example file is minimal, with just two entries:

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=

That tells you the contact form is wired to Supabase, through @supabase/supabase-js, and that the credentials are exposed to the browser by design, since the prefix makes them public. The anon key is the one Supabase issues for client use, and a public site needs a real project behind it, so this is the first configuration step for anyone deploying the template.

The public directory holds the static assets, src holds the app, and there is a jsconfig.json for the editor rather than a tsconfig, which is a small sign of the template being JavaScript with MDX content rather than a TypeScript project.

The assets are borrowed, and that is the caveat

The resources section of the README lists what the template uses, and it is worth reading before you publish anything with it.

The character image on the about page was created using Bing Search. The contact page has a Lottie animation taken from lottiefiles, the sloth meditate animation. Fonts come from Google Fonts, and icons come from Iconify.

Then there is the blog imagery, and it is a long list. Every photograph in the example posts is credited to a named Unsplash photographer, among them Carlos Muza, Marvin Meyer, Paul Esch-Laurent, Kelly Sikkema, Lauren Mancke, Luca Bravo, Christina from wocintechchat.com, C D-X, charlesdeluvio, Emile Perron, Roman Synkevych and others, each with a link to their Unsplash page and a credit line for the copy text.

So the template is honest about the provenance, which is more than most. What it does not do is grant you rights to any of it. Unsplash images have their own licence terms, the Lottie animation has its own terms, and the character image is a search result. For a personal blog that is a footnote. For a commercial launch, every one of those is a decision to make deliberately rather than inherit.

Editorial conclusion

The template suits a developer who wants a personal blog with dark mode, search, syntax highlighting and a sitemap already wired, and who is starting a new Next.js project rather than maintaining an old one. It is the wrong choice if you want a managed CMS behind the blog, and it is a poor match if you follow the video tutorial literally, since the tutorial is built around Contentlayer while the current branch uses Velite. Before starting, read the 2026 modernization notes, decide whether you want the Velite or the Contentlayer branch, and check the Node 22 requirement in the package manifest.

Frequently asked questions

Official sources

1. codebucks27/Nextjs-tailwindcss-blog-template on GitHub
2. Issues
3. License: MIT
4. Project website
5. README