Internal Links

Internal Links

Ensure all buttons and links in a page connect to valid destinations - either other pages or sections on the same page.

Workflow

1. Read Page File - Identify all section components
2. For Each Section:
   • Find all <Button> components
   • Find all <a> or <Link> elements
   • Verify each has a valid href
3. Add Missing Links - Wrap buttons with <Link> as needed
4. Add Section IDs - For same-page anchor targets
5. Update i18n - Add CTA text if missing

INPUT Required

When running this skill, you need:

• Page route (e.g., /, /​leistungen)
• Site pages from docs/​sitemap.md

Button Link Pattern

All buttons must be wrapped with Next.js <Link>:

// CORRECT: Button with Link
<Button asChild>
  <Link href="/​kontakt">{t("cta")}</​Link>
</​Button>

// CORRECT: Button with anchor link
<Button asChild>
  <Link href="#pricing">{t("cta")}</​Link>
</​Button>

// WRONG: Button without link
<Button>{t("cta")}</​Button>

// WRONG: Button with onClick only
<Button onClick={handleClick}>{t("cta")}</​Button>

Link Types

1. Page Links

Link to other pages in the site:

<Link href="/​kontakt">Contact</​Link>
<Link href="/​leistungen">Services</​Link>
<Link href="/​projekte">Portfolio</​Link>
<Link href="/​ueber-uns">About</​Link>

2. Anchor Links (Same Page)

Link to sections on the same page:

<Link href="#pricing">View Pricing</​Link>
<Link href="#faq">FAQ</​Link>
<Link href="#contact">Get in Touch</​Link>

Requires: Target section must have matching id:

<section id="pricing" className="py-16 lg:py-24">
<section id="faq" className="py-16 lg:py-24">

3. Page + Anchor Links

Link to a section on another page:

<Link href="/​leistungen#webdesign">Web Design Services</​Link>
<Link href="/​kontakt#form">Contact Form</​Link>

Common CTA Destinations

Section IDs

Add id to sections that are anchor link targets:

// Homepage sections
<section id="features" ...>
<section id="process" ...>
<section id="pricing" ...>
<section id="projects" ...>
<section id="testimonials" ...>
<section id="faq" ...>
<section id="contact" ...>

ID Naming Convention

Use lowercase, hyphenated names matching the section purpose:

Checklist Per Section

For each section, verify:

• All <Button> components have asChild prop
• All buttons are wrapped with <Link href="...">
• href points to valid page or #sectionId
• If anchor link, target section has matching id
• Button text is from i18n ({t("cta")})

Example Fixes

Fix 1: Button Without Link

Before:

<Button size="lg">
  {t("cta")}
</​Button>

After:

<Button asChild size="lg">
  <Link href="/​kontakt">{t("cta")}</​Link>
</​Button>

Fix 2: Add Section ID for Anchor

Before (button):

<Button asChild>
  <Link href="#pricing">{t("viewPricing")}</​Link>
</​Button>

Before (section - missing id):

<section className="py-16 lg:py-24">

After (section - with id):

<section id="pricing" className="py-16 lg:py-24">

Fix 3: Scroll Hint Button

Before:

<Button variant="link" className="text-white">
  <span>{t("scrollHint")}</​span>
  <ArrowDown className="size-4" />
</​Button>

After:

<Button asChild variant="link" className="text-white">
  <Link href="#features">
    <span>{t("scrollHint")}</​span>
    <ArrowDown className="size-4" />
  </​Link>
</​Button>

Import Requirements

Ensure sections have the Link import:

import Link from "next/​link";

Output

After running this skill, report:

• Number of buttons linked
• Section IDs added
• List of link destinations used