Routing using Next.js

In this article, we are going to see how routing works in Sitecore Headless using next.js.

What is Routing?

Folders are used to define routes. A route is a single path of nested folders, following the file-system hierarchy from the root folder down to a final branch folder. For Example, let me take the Sitecore content tree to show the tree structure.

As we see, home is the root node, and it has the child node “graphql” and it also has the sub child node “sample-1”. So, the route path should be “/home/graphql/sample-1”.

Next.js uses file-system based router. This means, when the file is created inside the pages directory in next.js application by default a route is added. If the page is created like the below structure, route will be created for relevant folder structure till js/tsx file.

Run the Application using Disconnected Mode:

After created the test.tsx file under the sample folder, we need to run the application using disconnected mode.

jss start        

once we run the above command, we can go to https://localhost:3000/sample/test and we can see the test page like below.

Yes, as we think we have got the content whatever the page has. Without no doubt, this is as simple as it is. Route will be created as per the folder structure. But in case of headless sitecore where we have hundreds and thousands of pages are created on the run, how will this work out? Yes, as we feel, we can’t create a route for each sitecore page. We are going to see how this works out in Headless sitecore.

How the routing works in Connected Mode?

When we run the application in connected mode, the data will be coming from the sitecore. So, we don’t need to setup any file/route. Because this will be handled by “/src/pages/[[..path]].tsx” file that’s created when we create a Sitecore nextjs headless app.

When creating a headless JSS Next.js application, it is instantiated with an optional catch-all route defined in the file “/src/pages/[[..path]].tsx” that helps Next.js compose and render pages based on Sitecore data.

SSG prerendering will use GetStaticPaths(with GetStaticProps) which generates list of pages that should be statically generated using SitecoreSitemapFetcher. In case of SSR, [[…path]].tsx will have an implementation of GetServerSideProps.

See the below diagram from Sitecore document, it clearly states that when accessing a page in the browser, the optional catch-all route passes the path information to the data fetching method defined in the page, getStaticProps or getServerSideProps, on the context object as a tokenized array.

The Page Props Factory uses the path information to construct a Sitecore item path and makes a request to the Sitecore Layout Service REST API or Sitecore GraphQL Edge schema to fetch layout data for the item.

Use below command for connected mode

jss start:connected        

Go to https://localhost:3000/graphql

Above page is rendered using connected mode using item id for page routing and gets the data from layout service.

I hope you all understand how the routing works using next.js in disconnected & connected mode.

That’s the end of this article.

Happy Sitecoring !!!