Back to templates

Template details

NextVita

Free Next.js boilerplate aimed at a 100% Lighthouse score and maximum SEO benefit from Google Core Web Vitals.

About this template

NextVita is a free, open-source Next.js boilerplate designed to achieve a 100% Lighthouse score and maximize SEO benefits from Google's Core Web Vitals update. It's built by shivammodiin, published on GitHub under the MIT License, and can be deployed to Vercel with a single click.

What is NextVita?

NextVita is a lightweight starter project that combines Next.js, MDX, and the classless MVP.css stylesheet to produce a fast, SEO-conscious site. It takes MDX files as content input and outputs a static/SSR-ready Next.js website with a built-in blog, Google Analytics tracking, and Core Web Vitals reporting. The project runs on Node.js (version 10.0.0 or newer) and provides a live demo at https://nextvita.vercel.app.

Key Features

  • 100% Lighthouse score — The project is engineered around passing Lighthouse audits perfectly, directly supporting the Google Core Web Vitals ranking signals.
  • Google Analytics integration — Google Analytics is included out of the box, and Core Web Vitals reports are fed into the same Google Analytics dashboard for performance monitoring.
  • MDX blog — Blog posts live as MDX files, so you can import and render React components inside Markdown content without a separate CMS.
  • Classless CSS with MVP.css — Styling relies on MVP.css, a minimalist, classless stylesheet, which keeps the markup semantic and the CSS footprint small.
  • One-click Vercel deployment — The repo includes a Deploy with Vercel button that connects the GitHub repository to a hosted environment automatically.
  • Free and MIT licensed — You can clone, modify, and redistribute the code freely, with no licensing fees.

Who is it for?

  • Performance-focused developers — Use NextVita as a baseline for any Next.js project where Lighthouse scores and Core Web Vitals matter for SEO.
  • Bloggers and content creators — Publish MDX-based posts that support interactivity through embedded React components, all without setting up a full CMS.
  • Startups and indie hackers — Launch a fast, analytics-ready marketing site or blog on Vercel with minimal configuration.
  • Open-source contributors — The repo explicitly welcomes pull requests, follows the all-contributors specification, and maintains a public issue tracker.

What can you do with NextVita?

  • Build a Lighthouse-optimized site — Start from a zero-config Next.js setup and add pages, components, and MDX content while keeping performance scores high.
  • Create a component-rich blog — Write posts as .mdx files and import React components to produce interactive articles, tutorials, or documentation.
  • Track Core Web Vitals — Connect your Google Analytics property and view Web Vitals data alongside your standard traffic analytics.
  • Deploy to Vercel instantly — Use the deploy button or connect your own repository to get a live site in minutes.

How does NextVita work?

Getting started is a standard clone-and-install flow: clone the repo from https://github.com/shivammodiin/nextvita, run yarn install or npm install, and start the development server with yarn dev or npm run dev at http://localhost:3000. For production, run npm run build and then npm start. MDX files placed in the blog directory are rendered as posts during the Next.js build.

FAQ

Is NextVita free?

Yes. NextVita is released under the MIT License, so you can use it for personal or commercial projects, modify it, and distribute it freely.

What Node.js version is required?

The README specifies Node.js version 10.0.0 or higher as the minimum requirement to run the boilerplate locally.

What CSS framework does NextVita use?

It uses MVP.css, a minimalist classless stylesheet. This means semantic HTML elements are styled by default, and you don't need to write utility classes.

Can I use React components inside blog posts?

Yes, because blog content is MDX, you can import React components directly in the Markdown and use them within the post content.

What performance score does it aim for?

The template is designed to achieve a 100% Lighthouse score, with the goal of maximizing SEO benefits from Google's Core Web Vitals update.

screenshot of NextVita on template0.com