Managing URLs with redirects and rewrite paths
In this guide, learn how to configure redirects and rewrites in your FastStore project to manage how users access your content.
Redirects are used to send users from one URL to another automatically. This is useful when a page has been moved, renamed, or removed. For example, if a page has been moved or renamed, the redirect ensures the user is sent to the new location.
Rewrites allow you to map custom URLs to existing page templates without changing the URL in the browser. This is useful when you want to hide complex or dynamic URL structures from users while maintaining clean and SEO-friendly URLs. For example, you can map a custom URL
/sale
to an existing Product Listing Page template.In summary:
- Redirects change both the URL the user sees and the destination.
- Rewrites keep the URL the same but change the destination internally.
These two tools enhance content organization, help maintain a good user experience, and ensure search engines continue to index the correct content.
Creating redirects
FastStore provides a way to configure redirects through the
faststore.config.js
file. This configuration is based on the Next.js redirects.For projects hosted on Vercel there are redirect limits such as the following: Number of redirects in the array: 1.024 maximum. String length forsource
anddestination
parameters: 4.096 maximum. For more information access the Vercel Redirects article.
-
Open your FastStore project in your preferred code editor and go to the
faststore.config.js
file within your project directory. -
Inside the
faststore.config.js
, add theredirects
function. This function will define your redirect rules, for example:_10account: "{accountName}",_10…_10async redirects() {_10const redirects = require('./src/redirects.json');_10return redirects;_10},Theredirects
function requires therequired.json
file, which you will create in the next step. This file holds the redirect definitions. -
Go to the
src
folder and create theredirects.json
file. Inside theredirects.json
file, add the following:_10[_10{_10"source": "/office",_10"destination": "/about",_10"permanent": true_10}_10]Property name Description source
Original URL pattern that triggers the redirect. In this example, any URL starting with /office
will be redirected.destination
New URL to which users will be sent. Here, /about
is the destination for users coming from/office
.permanent
The type of redirect. Set to true
for a permanent (308 status code) redirect, which search engines will cache. Set tofalse
for a temporary (307 status code) redirect.For more information about each property, access the Next.js documentation. -
Run
yarn dev
to start your project in development mode. -
Open the browser and access the old URL (e.g.,
/office
). If the redirect is set up correctly, you should be automatically redirected to the new URL (e.g.,/about
).
Creating rewrites
FastStore leverages Next.js rewrites to create custom routes while using existing Product Listing Page (PLP) templates. This allows you to map specific URLs to templates defined in your Headless CMS, providing flexibility in content organization and URL structure.
For more information on using rewrites with PLP templates, see the Using Rewrites with PLP template section on the Multiple page template documentation.