Skip to content

Prepend the Next.js basePath to index card hrefs - #43

Merged
rezrah merged 1 commit into
mainfrom
rerah/fix-index-cards
Jun 19, 2025
Merged

Prepend the Next.js basePath to index card hrefs#43
rezrah merged 1 commit into
mainfrom
rerah/fix-index-cards

Conversation

@rezrah

@rezrah rezrah commented Jun 19, 2025

Copy link
Copy Markdown
Collaborator

Fixes bug where index cards 404 on Next.js builds that specify a basePath (like Primer sites).

Testing:

  1. Go to this preview link
  2. Click on a card
  3. Observe that it goes to right location and doesn't 404

Copilot AI review requested due to automatic review settings June 19, 2025 12:42
@rezrah
rezrah requested a review from a team as a code owner June 19, 2025 12:42
@rezrah
rezrah requested a review from danielguillan June 19, 2025 12:42

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR ensures index cards use Next.js Link to respect the configured basePath, preventing 404s on sites with a custom basePath.

  • Wrap each <Card> in a next/link to inherit basePath
  • Import Link from next/link and adjust Card href
  • Add a changeset entry to release the patch

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File Description
packages/theme/components/layout/index-cards/IndexCards.tsx Wrap cards in Link and change Card href prop
.changeset/chatty-trains-explode.md Add changeset note for basePath support
Comments suppressed due to low confidence (1)

packages/theme/components/layout/index-cards/IndexCards.tsx:94

  • Consider adding a unit or integration test to verify that the rendered href on each card includes the configured basePath, preventing regressions in future changes.
            <Link legacyBehavior passHref href={item.route}>

{item.frontMatter.description && <Card.Description>{item.frontMatter.description}</Card.Description>}
</Card>
<Link legacyBehavior passHref href={item.route}>
<Card href="#" hasBorder>

Copilot AI Jun 19, 2025

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] Using href="#" can trigger unwanted jumps and may confuse assistive technologies. Instead, remove the explicit href prop and let Link passHref supply the correct URL, or use as="a" on Card to ensure the link behavior without a placeholder.

Suggested change
<Card href="#" hasBorder>
<Card as="a" hasBorder>

Copilot uses AI. Check for mistakes.
@rezrah
rezrah merged commit 1b15bdf into main Jun 19, 2025
7 checks passed
@primer-css primer-css mentioned this pull request Jun 19, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants