Architecture – Layout

Understanding layout.tsx, global styles, and SEO configuration

What is layout.tsx?

The layout.tsx file controls what stays the same across all your pages. Think of your website like a house with different rooms (pages) — the layout file is the structure all rooms share, like the ceiling, walls, and floors.

Key concept: Layout wraps around all your pages, providing common elements and functionality that every page needs.

What Goes in Layout?

You use the layout file to include elements that should appear on every page:

🧭 Navigation

A navigation bar at the top that helps users move between pages

🦶 Footer

Footer content at the bottom with links, copyright, contact info

🔐 Providers

Wallet providers, user sessions, or authentication so people stay connected when switching pages

🎨 Global Styles

General styles, fonts, and themes that should apply to the whole site

SEO and Social Sharing

When you share your website on Twitter, Discord, or anywhere else — this is where you control what shows up in the link preview. It also helps Google and search engines understand what your site is about.

Metadata Configuration

You can ask AI to include a metadata block inside your layout.tsx file:

export const metadata = {
  title: "Wishing Well",
  description: "Burn ETH to make an onchain wish.",
  keywords: ["ETH", "onchain", "wishing well", "crypto app"],
  openGraph: {
    title: "Wishing Well",
    description: "Burn ETH to make an onchain wish.",
    images: ["https://yourdomain.com/preview.png"],
  },
  twitter: {
    card: "summary_large_image",
    title: "Wishing Well",
    description: "Make a wish onchain by burning ETH.",
    images: ["https://yourdomain.com/preview.png"],
  },
};

What Each Part Does

title

Shows up as the tab name and on Google search results

description

Shows up under your link when shared and in search results

keywords

Helps search engines understand what your site is about

openGraph and twitter

These make your link look good when shared on social media

Global CSS (globals.css)

The globals.css file is your app's default style sheet. It sets the base look and feel for your whole site.

What it controls:

Font styles and typography
Background colors and themes
Default styling for buttons, links, and text
CSS variables and custom properties

You usually don't need to touch this file directly. When you ask AI to "change the font" or "make all text bigger," it might make changes here.

💡 Think of it like:

Setting the dress code for your entire website — these styles apply everywhere unless specifically overridden.

Tailwind Configuration

The tailwind.config.ts file is where your style options live. Tailwind is the design system your app uses — like a big Lego set of styles for spacing, colors, fonts, shadows, etc.

What this file controls:

Custom colors or fonts
Breakpoints for mobile vs desktop
Custom animations and transitions
Extended spacing, sizing, and layout options

You don't need to edit this yourself — just know that if you ask AI for a new color, font, or animation, this is the settings file it might update.

💡 Think of it as:

The settings menu for your style toolkit — it defines what styling options are available throughout your app.

Layout Best Practices

✅ Do This

Keep layout simple and focused on shared elements
Include proper SEO metadata
Set up consistent navigation and branding
Configure providers at the layout level
Use semantic HTML structure

❌ Avoid This

Don't put page-specific content in layout
Don't hardcode content that should be dynamic
Don't ignore mobile responsiveness
Don't forget to set up proper metadata

🎯 Common Layout Elements

Header with logo and navigation
Main content area wrapper
Footer with links and info
Theme provider for dark/light mode
Error boundaries for better UX