App Configuration & Branding

How to configure the site name, URLs, metadata, and other app-level settings.

Last updated: April 12, 2026

Site settings in the database

BloggFast stores site-wide configuration in the SiteSettings database table (a singleton record with id "default"). Admin users can edit these at /admin/settings. Settings include:

Field	Description	Default
`siteName`	Your blog's display name	`AI Blog`
`siteDescription`	Default meta description for SEO	–
`siteUrl`	Production URL of your site	–
`logoUrl`	URL to your logo image	–
`ogImageUrl`	Default Open Graph image URL	–
`featuredSlug`	Slug of the article featured in the hero section	–
`twitterHandle`	Your Twitter/X handle for SEO meta tags	–
`socialLinks`	JSON object with social media URLs	`{}`
`trendingLogic`	Algorithm for trending articles: `score` or `views`	`score`

Tip

Run the seed script (npm run db:seed) to create the default SiteSettings and AiSettings records. Without them, the settings pages in the admin will show empty forms.

Global metadata in layout.tsx

The root src/app/layout.tsx exports a metadata object that sets default title, description, and Open Graph tags for all pages. Override this on any individual page by exporting a metadata object from that page's page.tsx, or using generateMetadata for dynamic pages.

Next.js configuration

Key settings in next.config.ts:

next.config.ts

const nextConfig: NextConfig = {
  reactCompiler: true,  // Enables React Compiler for automatic memoization
  images: {
    remotePatterns: [
      { protocol: "https", hostname: "cdn.sanity.io" },        // Sanity images
      { protocol: "https", hostname: "images.unsplash.com" },  // Stock photos
      { protocol: "https", hostname: "lh3.googleusercontent.com" }, // Google avatars
      { protocol: "https", hostname: "avatars.githubusercontent.com" }, // GitHub avatars
    ],
  },
  experimental: {
    serverActions: {
      bodySizeLimit: "4mb",  // Increased for image uploads
      allowedOrigins: ["demo.blogg.fast", "blogg.fast", "*.blogg.fast"],
    },
  },
};

Update the allowedOrigins array to include your production domain when deploying. This is required for Server Actions to work correctly from your domain.

Add any additional image hostnames you use (e.g., your own CDN, S3 bucket, or other image providers) to the remotePatterns array.

Quick branding changes

For the most common branding customizations:

What	Where to change
Site name & description	Admin Dashboard → Settings → Site Settings (updates the database)
Favicon	Replace `src/app/favicon.ico`
Colors	`src/app/globals.css` → CSS custom properties / Tailwind v4 theme
Fonts	`src/app/layout.tsx` → Google Font imports via `next/font`
Logo	Update the logo component in your navbar component
Social links	Admin Dashboard → Settings → Site Settings → Social Links (JSON field)
Allowed image domains	`next.config.ts` → `images.remotePatterns`
Server Action origins	`next.config.ts` → `experimental.serverActions.allowedOrigins`