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

The Blog uses one generated opengraph-image.tsx design by default. Every post uses the same CoreMVP logo, layout, colors, and typography while its title comes from the post source. The shared design follows the same centered CoreMVP brand, Geist Mono title, and bottom-left Blog label as the square covers on /blog. The wide social image keeps the brand and title inside its centered crop-safe area; social platforms may still remove the corner label when they crop it.

The shared composition and sample-post entry points live in:

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

Edit default.tsx to rebrand every Blog card and social image together. Each sample post has an explicit entry point in registry.tsx. A composition receives either the square card format or the wide social format, so one slug-owned component can adapt its layout without creating two visual authorities. The sample entry points currently render the same default design; change one when an article needs deliberate art direction. Posts that are not in registry.tsx also use default.tsx. Open Graph and Twitter reuse the social format.

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