This plugin allows a user to manage redirects from the admin panel.
This plugin allows a user to manage redirects from the admin panel.
Once the plugin is enabled, you should see a new option (Redirects) under plugins in the admin dashboard.
Inside this plugin you can add redirects, each redirect requires the following fields to, from, type.
The To
field represents the destination URL where the user should be redirected to. The From
field represents the original URL that the user attempted to access. The Type
field represents the type of redirect to be used (e.g. 301 or 302).
Once a redirect is added, it will be output on the endpoint api/redirects
as a JSON object. This endpoint can be accessed by authenticated users with the appropriate permissions.
npm install strapi-plugin-redirects
or yarn add strapi-plugin-redirects
./config/plugins.js
:1
2
3
4
5
6
7
8
9
10
module.exports = ({ env }) => ({
// ...
plugins: [
// ...
redirects : {
enabled: true,
},
],
// ...
});
Log in to your Strapi admin panel and navigate to the Redirects
option under plugins.
Click on the Add New Redirect
button to add a new redirect.
Fill in the required fields (To, From, and Type) for the redirect.
Save the redirect and it should be output on the endpoint api/redirects
.
To view the redirects, make a GET request to the api/redirects
endpoint. The response should be a JSON object containing all of the redirects.
You can use relative or absolute paths depending on your use case for the api for "from" and "to"
You should use either 301/302 or permanent/temporary for parsing to work and map to the correct type in the enumerable field
Since Strapi is headless this plugin is simply a way for content editors or SEOers to manage redirects to be consumed by the frontend. An example implementation of useage of the redirects in next.js is:
The redirects request and mapping file could look something like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const fetch = require('isomorphic-unfetch');
// Bake redirects into next config at build time
const redirects = () => {
const apiUrl = process.env.NEXT_STRAPI_API_URL || 'http://localhost:1337/api';
return fetch(`${apiUrl}/redirects?pagination[start]=0&pagination[limit]=-1`)
.then((res) => res.json())
.then((response) => {
const redirects = response.data.map((redirect) => ({
source: redirect.attributes.from,
destination: redirect.attributes.to,
permanent: redirect.attributes.type === 'permanent',
}));
return redirects;
})
};
module.exports = redirects;
And using it in the next.config.js would work like this.
1
2
3
4
5
6
7
8
const redirects = require('./redirects');
module.exports = {
...
redirects: () => {
return redirects();
}
};
Inspired by @webbio plugin which works very similarly but is not on the marketplace or on a public repository for some reason (I added import functionality, would have done a pull request if it was public!)
If you want to help out I have some things I'd love to implement with this plugin.
Read from existing content types and have a settings page to "enable" redirects on specific content types so the user can select a collection or single type and be prompted with a modal to add a redirect if a content item is deleted or a UID like a slug is renamed.
Add provider support for Vercel/Netlify/Firebase/Ampliphy/Render.io so redirects are uploaded automatically on CRUD events to be handled by the host (I know render.io only allows GET requests for it's redirects dashboard)
This plugin is licensed under the MIT. See the LICENSE file for more information.
npm install strapi-plugin-redirects
Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.