sfnext-routing

name	sfnext-routing
description	Implement file-based routing in Storefront Next with React Router 7. Use when adding new pages, creating layout routes, defining route parameters, or understanding route module exports (loader, action, component, meta). Covers flat-routes conventions, nested layouts, and the _app prefix.

Routing Skill

This skill covers React Router 7 file-based routing in Storefront Next projects.

Overview

Storefront Next uses React Router 7 in framework mode with flat-routes file conventions. Route files live in src/routes/ and file names map directly to URL paths using dot (.) separators for nesting.

Route File Conventions

File Name to URL Mapping

File Name	URL Path	Notes
_app.tsx	—	Layout route (wraps child routes)
_app._index.tsx	/	Home page (index of _app layout)
_app.product.$productId.tsx	/product/:productId	Dynamic parameter
_app.category.$categoryId.tsx	/category/:categoryId	Dynamic parameter
_app.cart.tsx	/cart	Static route
_app.account.tsx	/account	Layout for account pages
_app.account.orders.tsx	/account/orders