Skip to main content
Small but useful tips for common tasks when working with Latch.

​
Removing a Page

To remove an entire page from your website:
1

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/
2

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.):
1

Find the page file

Open the page’s page.tsx file. For homepage:
app/page.tsx
2

Remove the component

Find the component and delete both:
  1. The import statement at the top
  2. 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:
ComponentLocationWhat it does
<SaleBanner />app/page.tsxSale countdown banner
<DiscordBanner />app/page.tsxDiscord invite section
<Testimonials />app/page.tsxCustomer reviews section
<Comparison />app/page.tsxFeature comparison table
<Hardware />app/page.tsxServer 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

1

Open next.config.ts

Find the file at the root of your project.
2

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
      },
    ],
  },
};
3

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:
1

Add image to public folder

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

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.
1

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
2

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.",
  },
};
3

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:
  1. Press Ctrl + Shift + F (Windows) or Cmd + Shift + F (Mac)
  2. Type the exact text you see on the page
  3. Open the file that contains it and update the string
4

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:
FindReplace With
latch.ggyourdomain.com
billing.latch.ggbilling.yourdomain.com
discord.gg/latchdiscord.gg/yourserver
contact@latch.ggcontact@yourdomain.com
In the “files to include” field, enter config/**/*.ts to limit search to config files only.
All hosting plans (VPS, Web Hosting, Dedicated) support clickable purchase links via the orderUrl field.
1

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
2

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: [...],
  },
]
3

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