Adding redirects in Next.js when using a CMS

Question

I want to add a redirect functionality to an app in NextJS that fetches all content from a CMS (Contentful). In that process, I am thinking on two different approaches regarding the implementation in NextJS and content modelling. I would like to better understand whether Approach I is doable and also a good practice, or if I should go for a different way, possibly approach II.

Approach I:

The actual situation I am trying to work with regarding content modelling:

Page

• Url
• Content

Redirects

• From url
• To url

Some Page content types will potentially have in the future some redirects, which means that for each redirect, a new Redirect content will be created.

I wrote a helper method that calls the CMS API and brings the content as a Redirects array, expecting that I could use that data to populate the redirects array returned inside the next.config.mjs file.

next.config.mjs fetchRedirects call screenshot(from inside redirects() )

In this approach I am finding some troubles, since I get the following error when running npm dev or trying to build:

node:internal/errors:490
ErrorCaptureStackTrace(err);
^
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/user/Dev/my-web/apps/api-calls/graphql/redirects' imported from /Users/user/Dev/DFDS/my-web/apps/dfds-unified-web/next.config.mjs

at new NodeError (node:internal/errors:399:5)
at finalizeResolution (node:internal/modules/esm/resolve:231:11)
at moduleResolve (node:internal/modules/esm/resolve:850:10)
at defaultResolve (node:internal/modules/esm/resolve:1058:11)
at nextResolve (node:internal/modules/esm/loader:164:28)
at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:419:18)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
at link (node:internal/modules/esm/module_job:76:36) {

code: 'ERR_MODULE_NOT_FOUND'
}

Node.js v19.4.0

I can´t find proper documentation on this approach, and it is not clear to me why the app is crashing, since the import path to fetchRedirects is correctly referenced. I have tested the fetchRedirects method by calling it in the getStaticProps function inside the pages slug and it is working properly.

Hardcoding the redirects array inside next.config.mjs is not an option, since I would like to come up with a scalable solution to my problem.

Approach II

Page

• Url
• Redirect
• Content

A second approach I am considering is having a Redirect content type inside the Page content type. By this means, I could return a redirect element from the getStaticProps function, together with the props for each of the pages, and then write some logic to redirect in case that the property is found.

I haven´t tried this last approach yet, but I understand that it is also possible, and I was also able to find some more references on how to do it. But I still would like to go for approach I if possible, since I would like to learn from it, or confirm that it is either inviable or not good practice.

I would highly appreciate any recomendation and possibly documentation that I am not finding at the moment.

Thank you for your time.

Have a nice day!

Answer 1

Have you solved the problem by now? I'd like to help but I need more information regarding your folder structure. Where is the config file exactly located?

If you are trying to import from a different folder under /apps it will not work, the module needs to be in the same apps folder as the config. alternatively, the package including the fetch module needs to be a globally shared package. Read this part about building a resuable library and have a look at the detailed structure in the Vercel monorepo example.

One more thing to note is that if you want the redirects to work on both navigation as well as on initial page request, you have to use middleware (see "Conditional Statements" section) because the redirects in the config only apply to initial page requests.