Install the articles package

Run pnpm add @fullstackdatasolutions/articles in your Next.js project root.

Add the Tailwind source directive

Add @source \"./node_modules/@fullstackdatasolutions/articles/src\" to your globals.css so Tailwind CSS v4 picks up the package's class names.

Create your articles config

Export an ArticlesConfig object with siteUrl, siteName, and pageSize from a config file in your project.

Wire up the articles index page

Create app/articles/page.tsx, import ArticlesPage and generateArticlesIndexMetadata from the package, pass your config to both, and export metadata from the page.

Add sitemap integration

Import getArticleSitemapEntries in your sitemap.ts and spread the result alongside your static page entries.

Copy the comments API routes

Copy the provided comments API route files into your app's API directory and configure NextAuth session if you want reader comments enabled.

Drop in your first article

Create public/articles/[slug]/article.md with frontmatter fields including title, excerpt, author, tags, date, and featuredImage. The package picks it up automatically on next build or dev reload.

Blog

I Rebuilt the Same Blog System Four Times. So I Packaged It.