project-portfolio

Self-contained project portfolio component for Next.js App Router. Pass a clientSlug and apiBase — it fetches, caches, and renders everything.

Requirements

Next.js 13+ (App Router)
React 18+

No other dependencies.

Installation

npm install project-portfolio

Usage

// app/page.tsx
import { ProjectPortfolio } from "project-portfolio"

export default function Page() {
  return (
    <ProjectPortfolio
      clientSlug="your-client-slug"
      apiBase="https://your-api.com"
    />
  )
}

Props

Prop	Type	Required	Default	Description
`clientSlug`	`string`	Yes	—	Identifies which client's projects to load
`apiBase`	`string`	Yes	—	Base URL of the projects API
`title`	`string`	No	Client name	Override the header title
`basePath`	`string`	No	`"/projects"`	Base path for project detail links

Caching

Data is cached at two levels:

Per-render — React.cache() deduplicates any duplicate calls within the same render pass
Cross-request — next: { revalidate: 60 } on each fetch call caches responses in Next.js's built-in Data Cache for 60 seconds

No third-party caching libraries are used.

Publishing to npm

# 1. Create an account at https://npmjs.com
# 2. Log in
npm login

# 3. Build and publish
cd package
npm run build
npm publish --access public

Updating

Bump the version field in package/package.json then run npm publish again.