Customization

Overview

The template is designed to be customized. Common modifications:

• Brand colors and typography
• Landing page content
• Component styling
• Content gating rules

Quick Customizations

App Identity

Update the name, title template, description, locale, and default social image in the site config:

export const siteConfig = {
  name: "Your Product",
  titleTemplate: "%s | Your Product",
  description: "A clear description of your product.",
  locale: "en_US",
  socialImage: {
    path: "/og/default.png",
    width: 1200,
    height: 630,
    alt: "Your Product",
  },
} as const;

Set NEXT_PUBLIC_APP_URL to the final public origin. Canonicals, social URLs, the sitemap, and robots.txt use this value. See Configuration for local and hosted env settings.

Replace public/og/default.png and its editable public/og/default.source.svg when you change the product identity.

Blog Social Images

Edit the shared composition to change the CoreMVP logo, article title, typography, and dot texture across Blog cards and social images:

src/components/blog/open-graph/
├── build-your-first-feature.tsx
├── from-starter-to-product.tsx
├── seo-before-you-ship.tsx
├── default.tsx
└── registry.tsx

default.tsx owns the shared design. registry.tsx selects each article's composition and background from public/blog/backgrounds/; replace those background files or change the mapping to use your own artwork. Each title comes from the article's MDX frontmatter.

Cards use a wide cover that scales with their container. Open Graph and Twitter use the same composition at 1200×630, with the brand and title kept inside the centered square crop. A composition receives either the card or social format so you can adapt one article's layout for both placements. The sample entry points use the shared design; change one for article-specific artwork. Unlisted posts use default.tsx and the graphite background.

Generated TSX is an example, not a requirement. Next.js also supports static opengraph-image.jpg, .jpeg, .png, or .gif files and matching twitter-image files inside a route segment. Use either the generated file or a static file for the same convention, not both. See the Next.js metadata image convention for the supported file types and size limits.

The Blog uses a dynamic [slug] route. Replacing its generated file with one static image gives every post the same image. To keep a different PNG for each post, keep the generated route and select the post's local image by slug, or extend the Blog source metadata to own each image path.

Logo

Replace logo files:

public/
├── logo.svg
├── logo-dark.svg
└── favicon.ico

Colors

Edit CSS variables in src/styles/globals.css or Tailwind config.

Landing Content

Edit marketing copy in:

src/app/(marketing)/page.tsx