Customize Site Basic Information

Overview

Nexty.dev uses centralized configuration management, allowing you to control your entire site's branding information and SEO settings by modifying just a few files.

Files related to site branding and SEO settings are as follows:

nexty-wenext/
├── config/
│   └── site.ts                    # Site basic configuration (domain, author, social links, etc.)
├── lib/
│   └── metadata.ts                # Metadata generation utility
├── i18n/
│   └── routing.ts                 # Multilingual configuration
├── public/
│   ├── logo.png                   # Site logo
│   ├── favicon.ico                # Site icon
│   ├── og.png                     # Default language (English) OG image
│   ├── og_zh.png                  # Chinese OG image
│   └── og_ja.png                  # Japanese OG image
└── app/
    └── [locale]/
        └── layout.tsx             # 📄 Usage example

For documentation on metadata generation, please refer to this documentation.

Site Configuration

The unified configuration file for site branding information is located at config/site.ts.

Site Information Configuration Guide

config/site.ts

import { SiteConfig } from "@/types/siteConfig";
 
// Site base URL (required)
export const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL || "https://nexty.dev";
 
// Social media links (optional)
const GITHUB_URL = ''
const TWITTER_URL = ''
const YOUTUBE_URL = ''
const INSTAGRAM_URL = ''
const TIKTOK_URL = ''
const DISCORD_URL = ''
const EMAIL_URL = '[email protected]'
 
export const siteConfig: SiteConfig = {
  // Site name (appears in page titles)
  name: "Nexty.dev",
  // Site tagline (optional, used in homepage title)
  tagLine: "Build and ship your SaaS faster",
  // Site description (optional, defaults to multilingual file)
  description: "Next.js SaaS starter template with authentication, payments, and more.",
  // Site URL (required)
  url: BASE_URL,
  // Author information (for SEO)
  authors: [
    {
      name: "nexty.dev",
      url: BASE_URL,
    }
  ],
  // Creator (Twitter username)
  creator: '@judewei_dev',
  // Social media links, displayed by default in `components/footer/Footer.tsx`
  socialLinks: {
    github: GITHUB_URL,
    twitter: TWITTER_URL,
    youtube: YOUTUBE_URL,
    instagram: INSTAGRAM_URL,
    tiktok: TIKTOK_URL,
    discord: DISCORD_URL,
    email: EMAIL_URL,
    // You can add more social links; after adding, update `components/footer/Footer.tsx` to add jump links
    linkedin: '',
    facebook: '',
  },
  // Theme colors (browser address bar/task switcher color)
  themeColors: [
    { media: '(prefers-color-scheme: light)', color: 'white' },
    { media: '(prefers-color-scheme: dark)', color: 'black' },
  ],
  // Site default theme (light | dark | system)
  defaultNextTheme: 'light',
  // Icon configuration
  icons: {
    icon: "/favicon.ico",        // Browser tab icon
    shortcut: "/logo.png",        // Shortcut icon
    apple: "/logo.png",           // iOS add to home screen icon
  },
}

Configuration Options Explained

1. BASE_URL - Site Address

config/site.ts

export const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL || "https://nexty.dev";

Purpose:

Used to generate all absolute URLs (canonical, OG image links, etc.)
Affects SEO and social media sharing
When deploying to production, must set the correct domain name

2. name - Site Name

config/site.ts

name: "Nexty.dev"

Purpose:

Appears in page titles: {name} - {tagLine} and Page Name | {name}
Appears in OG card's siteName field

Examples:

Homepage: Nexty.dev - Build and ship your SaaS faster
Other pages: About | Nexty.dev

3. tagLine - Site Tagline

config/site.ts

tagLine: "Build and ship your SaaS faster"

Purpose:

Used only in homepage title: Site Name - Tagline

4. socialLinks - Social Media Links

config/site.ts

socialLinks: {
  github: 'https://github.com/yourusername',
  twitter: 'https://twitter.com/yourusername',
  // ...
}

Purpose:

Displays social media icons in the Footer component
Empty string means the icon won't be displayed

Supported Platforms:

GitHub, Twitter, YouTube, Instagram, TikTok
Discord, Email, LinkedIn, Facebook
Can be extended; extensions require synchronizing modifications to both site.ts and Footer.tsx

5. themeColors - Theme Colors

config/site.ts

themeColors: [
  { media: '(prefers-color-scheme: light)', color: 'white' },
  { media: '(prefers-color-scheme: dark)', color: 'black' },
]

Purpose:

Sets the color of browser address bar/task switcher
Particularly noticeable on mobile devices

Can be set to brand colors:

config/site.ts

themeColors: [
  { media: '(prefers-color-scheme: light)', color: '#3b82f6' },
  { media: '(prefers-color-scheme: dark)', color: '#1e40af' },
]

6. icons - Icon Configuration

config/site.ts

icons: {
  icon: "/favicon.ico",        // Browser tab icon
  shortcut: "/logo.png",        // Shortcut icon
  apple: "/logo.png",           // iOS home screen icon
}

Recommended Sizes:

favicon.ico: 32×32 or 64×64
logo.png: 512×512 (transparent background)

The type definition for site configuration is in types/siteConfig.ts. If you want to extend fields, you need to synchronize the type definition updates.

Logo Generation

Recommended multi-size icon generation tools:

https://icon.kitchen
https://realfavicongenerator.net/
https://logo.surf
https://ray.so/icon?q=
https://www.bitbug.net/ (PNG to Favicon)

Save the generated logo and ico files to the public folder, replacing the boilerplate's default logo images.

OG Image Configuration and Creation

OG (Open Graph) Image is the preview image displayed when your website link is shared on social media (Twitter, Facebook, LinkedIn, etc.).

Example Effect:

Displaying preview images can attract potential users to click faster.

File Location and Naming Convention

public/
├── og.png           # English version (default)
├── og_zh.png        # Chinese version
└── og_ja.png        # Japanese version

Rules:

Default language (English): og.png
Other languages: og_{locale}.png (for example: og_zh.png, og_ja.png)

Creating OG Images

Static OG Images can be generated using online tools such as:

Dynamic OG Images can be generated using next/og. You can refer to the directory boilerplate's opengraph-image.tsx file.

Testing OG Images

After the first share, social platforms will cache the image. If you modify the image, you can also refresh the cache in the above tools.

Customize Site Basic Information

Related Configuration

Internationalization

Metadata