Advanced Link Resolving

Developing with Prismic
, ,
1

Hello All !!

I'm looking for a little help for a link resolving problem with Next.TS, Prismic and Slice Machine.

Context
Let's say we have restaurant project.
We have two custom types Page and Location.
A Location has uid, name, url ... and a page has uid, title, description, location slices

Data
We have three locations with these respective uids : base , london, paris.
Three pages for each location.
{locationName}-home , {locationName}-about , {locationName}-contact
Each page is linked to its respective location with the field location on the Page custom type

The problem
I would like for the base restaurant to have /home, /about, /contact and the other would have [location]/home, [location]/about, [location]/contact.

What I tried
I tried Route Resolver by doing this

{
    type: "page",
    resolvers: {
      location: "location",
    },
    path: "/:location?/:uid",
  }

But it doesn't work as expected as it's giving me [location]/[uid] for each page and obviously I cant have three pages named with the same uid.

Link Resolver wont work either because I cant access the document data in the function, or there is no doc about it in the current version of Prismic.

Thank you all for your help :pray:t6: :handshake:

3

Hello @pro.bizach

Thanks for reaching out to us.

In Prismic repo, give UID in the documents:

`London-about`
`Paris-about`
`Base-about` etc,

Your folder structure should be in your project:

pages
   -[location]
       -[uid]
           -index.js

Under index.js, apply a check on all params. You can get location and uid both params. Before querying the document, apply a string function to concatenate the params with a dash.

Example: If there is request to /paris/about, so the routing will go under /pages/[location]/[uid]/index.js, where
params will be
params[0] as paris
params[1] as about
after applying the concatenation on params, query can be send with paris-about.

Thanks,
Priyanka

1 Like
5

Hello @Priyanka

Thanks a lot for your response !

Yes your example works, for requests to /[location]/[uid] and I ended up doing like this for the moment.
But I'm sorry, I didn't explain the problem correctly.

Context (again)
Let's say we have coolrestaurant.com as the main URL name

A request to coolrestaurant.com should display the base-home
All Requests to coolrestaurant.com/[uid] should display base-[uid]

Problem
The problem is I also want all requests coolrestaurant.com/[location]/ to query [location]-home so each location can have it's home without displaying .../home in the url.

In other words : I want the homepage of Paris to be coolrestaurant.com/paris, same for other cities.
But also, if the client decide to create a news page for the base location, it has to be coolrestaurant.com/news instead of coolrestaurant.com/base/news

I thought about defining the folloing kind of folder structure :

pages
   
   -[idk]
       -index.tsx //base-[uid] || [uid]-home
       -[uid]
           -index.tsx
   -index.tsx //base-home

If the user requests coolrestaurant.com/news ....
In getStaticProps of /pages/[idk]/index.tsx :
First I make a request to Prismic to check if base-[uid] does return a document, if not, I make another request to check if [uid]-home does.

But the thing is I can't pre config routes with Route Resolver with this kind of folder structure...
Do you have an Idea ?

Thank you so much for your help !

Zach

9

In my view, you can also use Redirects for redirection over a specific folder structure. The notable point here would be to have a defined site structure for all available locations. In case of any change, Redirects will have to be maintained accordingly.

Reference: next.config.js: Redirects | Next.js

module.exports = {
  async redirects() {
    return [
      {
        source: '/paris',
        destination: '/location/[uid]',
        permanent: true,
      },
........
    ]
  },
}

Let me know if you have any further questions.

Thanks,
Priyanka

1 Like