Next.js · Frontend · Frontend Framework

Skyplume Ships a Next.js 15 Blog Template That Hits Triple 100s on Lighthouse Out of the Box

By 薛定喵的谔 · Jun 28, 2026 · 110 views · 1 likes

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Most blog starters ship with broken SEO, missing feeds, and Lighthouse scores that start in the 60s. A template that clears 100 on three Lighthouse audits and bakes in structured data, RSS, and sitemap from day one removes the maintenance tax that kills personal writing momentum.

Summary

Skyplume is a Next.js 15 blog template built on the App Router, React 19, TypeScript, Tailwind CSS 4, and Contentlayer. It was extracted from a live production blog at 0x1ai.com, not assembled as a one-off demo. The template bundles MDX writing with front matter, code highlighting, math rendering, tags, pagination, RSS, sitemap, robots.txt, local search, dark mode, and optional Giscus comments.

SEO is wired in from the start: Open Graph, Twitter Cards, canonical URLs, and auto-generated BlogPosting JSON-LD structured data. The base install scores 100 on Lighthouse for Performance, Best Practices, and SEO before any third-party scripts or images are added. Configuration lives in plain data files and small React components, avoiding a heavy CMS.

Deployment targets Vercel with a one-click button, but static export is also supported. The design philosophy is content-first — restrained typography, stable dark mode, and lightweight route transitions — so the template stays out of the way once writing begins.

Takeaways

— Skyplume is a Next.js 15 App Router template using React 19, TypeScript, Tailwind CSS 4, and Contentlayer for MDX.

— The base template scores 100 on Lighthouse Performance, Best Practices, and SEO before third-party resources are added.

— SEO metadata, Open Graph, Twitter Cards, canonical URLs, and BlogPosting JSON-LD structured data are generated automatically from front matter.

— RSS, sitemap, robots.txt, and a local search index are included without extra configuration.

— Dark mode follows the system preference, and Giscus comments are available as an opt-in.

— Static export is supported alongside one-click Vercel deployment.

— Site configuration is centralized in data files like siteMetadata.js, profile.ts, and headerNavLinks.ts, not a CMS.

— Articles live in data/blog as MDX files with front matter for title, date, tags, categories, draft status, summary, and authors.

Conclusions

Extracting a template from a live production blog rather than building one from scratch means the design has already survived real content, not just lorem ipsum.

Triple-100 Lighthouse scores are rare in the Next.js starter ecosystem; most templates trade performance for visual flair and leave SEO as an afterthought.

Bundling JSON-LD structured data generation directly from front matter closes a gap that many static blogs never address, which hurts search visibility.

The template's restraint — no CMS, no database, plain data files — lowers the long-term maintenance surface. A blog that is just files in a repo is trivial to migrate, back up, and version.

Static export support matters for developers who want to host on GitHub Pages, Cloudflare Pages, or a cheap object store instead of paying for a Node server.

Concepts & terms

MDX

A superset of Markdown that lets you use JSX (React components) directly inside Markdown documents, enabling interactive or custom elements within otherwise static content.

Contentlayer

A content SDK that transforms local content files (MDX, Markdown, JSON) into type-safe JSON data consumable by Next.js and other frameworks, handling front matter parsing and validation.

JSON-LD (BlogPosting)

A structured data format embedded in a webpage's HTML that helps search engines understand the content as a blog post, enabling rich results like article carousels and improved snippet display.

Static Export

A Next.js output mode that generates a fully static HTML/CSS/JS site with no server runtime, deployable to any CDN or static hosting service without Node.js.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗