Quick Tips

Small but useful tips for common tasks when working with Latch.

Removing a Page

To remove an entire page from your website:

Delete the page folder

Find the page folder in app/ and delete it:

app/
├── about/           ← Delete to remove /about page
├── changelogs/
├── contact/
├── dedicated/
├── faq/
├── games/
├── jobs/            ← Delete to remove /jobs page
├── knowledgebase/
├── partners/        ← Delete to remove /partners page
├── privacy/
├── terms/
├── vps/
└── web-hosting/

Remove navigation links

Search your codebase for links to the removed page and remove them.Common places to check:

components/layout/Footer.tsx - Footer links
components/layout/Header.tsx - Navigation menu
config/pages/*.ts - Page configuration files

Quick search: Press Ctrl + Shift + F and search for:

/jobs
href="/jobs"
link: "/jobs"

Replace jobs with the page you removed.

Make sure no other pages link to the removed page, or users will see 404 errors!

Removing a Component

To remove a component from a page (like Sale Banner, Discord Banner, etc.):

Find the page file

Open the page’s page.tsx file. For homepage:

app/page.tsx

Remove the component

Find the component and delete both:

The import statement at the top
The component tag in the JSX

Example: Removing SaleBanner from homepage

// BEFORE
import SaleBanner from "@/components/sections/shared/SaleBanner";

export default function Home() {
  return (
    <main className="min-h-screen">
      <Hero />
      <SaleBanner />  {/* ← Remove this */}
      <Pricing />
      ...
    </main>
  );
}

// AFTER
export default function Home() {
  return (
    <main className="min-h-screen">
      <Hero />
      <Pricing />
      ...
    </main>
  );
}

Common components you might remove:

Component	Location	What it does
`<SaleBanner />`	`app/page.tsx`	Sale countdown banner
`<DiscordBanner />`	`app/page.tsx`	Discord invite section
`<Testimonials />`	`app/page.tsx`	Customer reviews section
`<Comparison />`	`app/page.tsx`	Feature comparison table
`<Hardware />`	`app/page.tsx`	Server hardware specs

Adding External Images

When you add an image from an external URL, you may see this error:

Error: Invalid src prop (https://example.com/image.png) on `next/image`, 
hostname "example.com" is not configured under images in your `next.config.ts`

Next.js blocks external images for security. You need to whitelist the image domain.

How to Fix

Open next.config.ts

Find the file at the root of your project.

Add the image domain

Find the remotePatterns array and add your domain:

// next.config.ts
const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      // ... existing domains ...
      
      // Add your new domain here:
      {
        protocol: 'https',
        hostname: 'example.com',  // ← Your image domain
      },
    ],
  },
};

Restart the dev server

Stop the server (Ctrl + C) and restart:

npm run dev

Full Example

If your image URL is:

https://cdn.myimages.com/photos/hero-banner.jpg

Add this to next.config.ts:

{
  protocol: 'https',
  hostname: 'cdn.myimages.com',
}

Common Image Domains

remotePatterns: [
  // Discord avatars
  { protocol: 'https', hostname: 'cdn.discordapp.com' },
  
  // Imgur
  { protocol: 'https', hostname: 'i.imgur.com' },
  
  // Unsplash
  { protocol: 'https', hostname: 'images.unsplash.com' },
  
  // Cloudflare Images
  { protocol: 'https', hostname: 'imagedelivery.net' },
  
  // AWS S3
  { protocol: 'https', hostname: 'your-bucket.s3.amazonaws.com' },
  
  // YouTube thumbnails
  { protocol: 'https', hostname: 'yt3.googleusercontent.com' },
  
  // Gravatar
  { protocol: 'https', hostname: 'www.gravatar.com' },
],

Use local images in public/assets/ to avoid needing to configure external domains. Reference them as /assets/your-image.png.

Using Local Images

For images you control, store them locally:

Add image to public folder

public/
└── assets/
    └── your-image.png

Reference in code

import Image from "next/image";

<Image 
  src="/assets/your-image.png" 
  alt="Description" 
  width={500} 
  height={300} 
/>

Benefits of local images:

No need to configure next.config.ts
Faster loading (served from your domain)
Won’t break if external host goes down
Better for SEO

Translating Your Site

Latch does not ship with a built-in i18n system. Instead, all display text lives inside the config/ directory as TypeScript files. To translate the site into any language, edit the values in those files.

Locate the config file for the page you want to translate

Every page in app/ has a matching config file:

config/
├── home.ts              ← Homepage
├── faq.ts               ← FAQ page
├── changelogs.ts        ← Changelogs page
├── testimonials.ts      ← Testimonials section
├── hardware.ts          ← Hardware specs section
├── seo.ts               ← SEO meta titles & descriptions
├── hosting/
│   ├── vps.ts           ← VPS Hosting page
│   ├── web-hosting.ts   ← Web Hosting page
│   └── dedicated.ts     ← Dedicated Servers page
├── games/
│   └── *.ts             ← Individual game pages
├── pages/
│   ├── about.ts         ← About page
│   ├── contact.ts       ← Contact page
│   ├── jobs.ts          ← Jobs page
│   └── partners.ts      ← Partners page
├── knowledgebase/
│   └── *.ts             ← Knowledge base articles
├── legal/
│   └── *.ts             ← Privacy & Terms pages
├── promotions/
│   └── *.ts             ← Sale banners & promotions
└── shared/
    ├── sections.ts      ← Navbar & Footer text
    └── comparison.ts    ← Comparison table

Edit the string values

Open the config file and replace the English text with your translation. Only change the values — leave the property keys (left side) unchanged:

// BEFORE
export const homeConfig = {
  hero: {
    badge: "Trusted by 500+ Customers",
    title: "Premium Game Server Hosting",
    description: "High-performance hosting built for gamers.",
  },
};

// AFTER (Spanish example)
export const homeConfig = {
  hero: {
    badge: "Con la confianza de más de 500 clientes",
    title: "Hosting Premium para Servidores de Juegos",
    description: "Hosting de alto rendimiento creado para jugadores.",
  },
};

Translate UI text inside components (if needed)

Some labels, button text, and helper strings are hardcoded inside component files under components/. If you cannot find a piece of text in config/, search for it globally:

Press Ctrl + Shift + F (Windows) or Cmd + Shift + F (Mac)
Type the exact text you see on the page
Open the file that contains it and update the string

Translate SEO metadata

Page titles and meta descriptions are separately controlled in config/seo.ts. Make sure to translate those too so search engines index your site in the correct language.

To bulk-find all English strings at once, open Ctrl + Shift + H, set “files to include” to config/**/*.ts, and search/replace term by term.

Quick Find & Replace

Use VS Code’s global search to find and replace across all files: Keyboard shortcut: Ctrl + Shift + H (Windows/Linux) or Cmd + Shift + H (Mac) Common replacements when setting up:

Find	Replace With
`latch.gg`	`yourdomain.com`
`billing.latch.gg`	`billing.yourdomain.com`
`discord.gg/latch`	`discord.gg/yourserver`
`contact@latch.gg`	`contact@yourdomain.com`

In the “files to include” field, enter config/**/*.ts to limit search to config files only.

Adding Purchase Links to Hosting Plans

All hosting plans (VPS, Web Hosting, Dedicated) support clickable purchase links via the orderUrl field.

Open your hosting config file

Navigate to the config file for the hosting type you want to edit:

VPS: config/hosting/vps.ts
Web Hosting: config/hosting/web-hosting.ts
Dedicated: config/hosting/dedicated.ts

Add orderUrl to each plan

Find the plans array and add orderUrl to each plan object:

plans: [
  {
    name: "VPS-STARTER",
    vcpu: "2 vCPU",
    ram: "4GB",
    price: 9.99,
    orderUrl: "https://billing.yourdomain.com/cart.php?a=add&pid=1",
    features: [...],
  },
  {
    name: "VPS-STANDARD",
    vcpu: "4 vCPU",
    ram: "8GB",
    price: 19.99,
    orderUrl: "https://billing.yourdomain.com/cart.php?a=add&pid=2",
    features: [...],
  },
]

Customize the Contact Sales section

Each hosting page also has a customizable “Contact Sales” section at the bottom:

customConfig: {
  title: "Need Custom Configuration?",
  description: "Contact our team for tailored solutions.",
  buttonText: "Contact Sales",
  buttonUrl: "/contact"
}

Use # as a placeholder URL during development, then replace with your actual billing/purchase URLs before going live.

FAQ

Common questions answered

Examples

Code examples and snippets

Sale Banner

Configure promotional banners

Configuration Basics

All configuration options

Getting Started

Configuration

Products & Hosting

Page Configuration

Deployment

Help & Resources

Removing a Page

Removing a Component

Adding External Images

How to Fix

Full Example

Common Image Domains

Using Local Images

Translating Your Site

Quick Find & Replace

Adding Purchase Links to Hosting Plans

FAQ

Examples

Sale Banner

Configuration Basics

​Removing a Page

​Removing a Component

​Adding External Images

​How to Fix

​Full Example

​Common Image Domains

​Using Local Images

​Translating Your Site

​Quick Find & Replace

​Adding Purchase Links to Hosting Plans

​Related Guides

FAQ

Examples

Sale Banner

Configuration Basics

Removing a Page

Removing a Component

Adding External Images

How to Fix

Full Example

Common Image Domains

Using Local Images

Translating Your Site

Quick Find & Replace

Adding Purchase Links to Hosting Plans

Related Guides