Links and Navigation

Adding Links and Resolving Routes

Transcript

[00:00] Now Mr. McDonald has the ability to create as many marketing pages as he wants. He can also link to them from his homepage. So jump into the page builder and navigate to your homepage.

[00:10] Click on the button link field, select 'Link to a Document' and choose the Smart Seeds page. Then in the next Text Slice, do the same thing, but link to the Tractor Tech page. Then finally, on the Split Image Text Slice with Mrs. McDonald, you can again link to the Smart Seeds page. Save and publish your work.

[00:32] To get the links for your marketing pages to work, you need to update the route resolver in the prismicio file. The route resolver queries the Prismic API to get all the UIDs for the page type to build links anywhere in your app. Just define the page type and the path you want to use to build the link. In this case, it's just the UID for each page at the base of the app directory.

const routes = [
  {
    type: "homepage",
    path: "/",
  },
  {
    type: "marketing_page",
    path: "/:uid",
  },
];

[00:50] So the route resolver will now point to each marketing page built by the Next.js app.

[00:55] If you create any more page types, you'll have to update the route resolver.

[00:59] Check your links are working by visiting the homepage to click the buttons.

Main takeaways

  • Add the links to the homepage in Prismic.
  • Update the route resolver in the prismicio.js file.

Answer to continue

Quiz banner

Are your links working?