Dynamic route is now available

When we first developed TVLK5, we include an express server to handle both route prefix (e.g: id-id) extraction from the URL and also to handle dynamic route requirement from product teams. The reason we use express for dynamic route was because we can't support next.js dynamic route feature since Next 9 originally launched.

When next.js is updated in 9.2.1, we finally able to integrate dynamic route into our framework.

If you're not interested in the detail you can skip to migration guide

Brief History

When we start working on the framework last year, we have next.js 9 as the base to build upon. The problem was our URLs for customer facing site have this locale prefix to determine which country and language that the user is in. We added custom middleware in the express server to remove the route prefix by matching it with the regex and forward the prefix (if any) via headers. This headers then get picked up by our next.js application. From there, it knows the current route prefix and can validate entirely inside getInitialProps.

Why express middleware? Because we have requirement where user can create dynamic route such as /activities/:country/detail/:nameId without having to bother with route prefix when matching the url so our middleware get applied to all URLs, and the next handler can simply match the URL without prefix.

We didn't use next dynamic route from the start because we want to have first-party support for client-side navigation. In practice, using dynamic route is not possible because next.js was expecting consistent href and as which is impossible as our href which maps to file path doesn't have route prefix while as that displayed in the address bar has a route prefix. It doesn't scale to create route prefix directory for all products. Imagine if everytime you create a page you'll need to create N files, each in different route prefix directory. It's a nightmare.

Shortly after, Custom Route RFC is opened and it seems like we can finally use this to replace our route prefix logic in express. Only after this PR landed that allows mismatching href and as we can finally integrate seamlessly with next.js dynamic routes.

Going forward, this is the recommended way to create dynamic route.

Migration Guide

If you have dynamic route in express, you've added both express middleware and 1 page handler prefixed by _ in its filename. To migrate to next dynamic route, you'll need to migrate all your dynamic routes in one commit because it's not currently possible to handle both at the same time.

First, you'll need to remove legacyRoutePrefixMiddleware in your express server. This middleware is used to make sure that you can still add dynamic route in your express server.

Next, rename all your dynamic route file (prefixed with _) into next.js dynamic route file format. You can use this guide when renaming your route file:

• Express uses :param while next.js uses [param]. For example if you have /activities/:country/detail/:nameId you can rename your route file to activities/[country]/detail/[nameId].tsx
• Express uses * for wildcard match, while next uses [...param]. For example if you have /explore/* you can rename your route file to explore/[...path].tsx

Generally you can use any string to name your params, except 2 reserved words: routePrefix and actualPath. This is because we use this in our next rewrites to handle route prefix extraction.

If you've renamed all your dynamic route files, the next step is removing all your dynamic route definition in your server logic. And you're done!

Make sure you do these before May 1st because we'll start throwing error when you use custom express server that relies on route prefix removal logic. In the meantime, you'll get warning log when you still use express dynamic route method.