Tailnext

Tailnext is a free, open-source Next.js and Tailwind CSS website template from onWidget that ships with a blog, dark mode, and production-ready performance optimizations.

What is Tailnext?

Tailnext is a free and open-source template for building websites with Next.js 14 (App Router) and Tailwind CSS, created by onWidget. It takes configuration from a config.mjs file and blog posts written in Markdown under src/content/blog/, and generates a complete website with a sitemap and robots.txt. The template runs on any Node.js environment and is ready to deploy to Vercel or Netlify.

What makes Tailnext stand out?

• Next.js 14 App Router — The project uses the modern app/ directory structure with layout.js, page.js, and a dynamic [slug] route for blog posts.
• Tailwind CSS with dark mode — Styling is utility-first via Tailwind CSS, and dark mode is supported out of the box.
• Production-ready scores — The template reports production-ready scores in Lighthouse and PageSpeed Insights.
• Image and font optimization — Next.js's built-in image optimization and font optimization are integrated.
• SEO-friendly blog — Blog content is authored in Markdown files under src/content/blog/ and rendered as static pages with clean URLs.
• Sitemap and robots.txt generation — The build generates a project sitemap and robots.txt based on your routes.
• Storybook integration — Includes .storybook/ and src/stories/ so you can develop and document UI widgets in isolation.
• One-click deployment — Provides deploy buttons for Netlify and Vercel, plus a CodeSandbox editor link.

Who should use Tailnext?

• Developers starting a new Next.js project — Clone the repo, run npm install and npm run dev, and you have a modern project structure with best practices already configured.
• Bloggers and content creators — Use the built-in Markdown blog to publish posts without setting up a CMS or database.
• Agencies and freelancers — Use the template as a base for client websites that need strong SEO and performance from the start.

What can you do with Tailnext?

• Launch a landing page or company site — Edit src/config.mjs to set site metadata and navigation, then deploy to Vercel or Netlify in a few clicks.
• Publish a blog — Add Markdown files to src/content/blog/, and they automatically appear under /blog with SEO-friendly URLs.
• Build and document UI components — Use Storybook to develop widgets in isolation and keep a living style guide.

How does Tailnext work?

Clone the repository with git clone https://github.com/onwidget/tailnext.git, install dependencies with npm install, and run npm run dev to view the site at localhost:3000. Customize the site through src/config.mjs and add blog posts as Markdown files. When you are ready, npm run build creates an optimized production build in ./dist/.

FAQ

Is Tailnext free?

Yes, Tailnext is free and open-source, released under the MIT license. You can use it for personal or commercial projects without paying a fee.

What kind of blog does Tailnext include?

Tailnext includes a fast, SEO-friendly blog. Posts are written as Markdown files in src/content/blog/, and the template generates static pages from them with sitemap support.

How do I deploy Tailnext?

You can build the site with npm run build and deploy the generated files to any hosting service. Netlify and Vercel one-click deploy buttons are also included in the README.