NextJS and next-routes not routing as I would expect

Question

I've created a routes.js file that is as follows:

const nextRoutes = require('next-routes');
const routes = module.exports = nextRoutes();

routes.add
    ('presenterallcurrent', '/presenter/:ccyear','speaker');
routes.add
    ('speakersessiondetail', '/presenter/:ccyear/:slugSpeaker','speakerdetail');

I am expecting that when I browse to:

/presenter/2018/douglas-crockford-1124

I will be taken to my /pages/speakerdetail.js file with query.ccyear and query.slugSpeaker populated to 2018 and douglas-crockford-1124

I am expecting that when I browse to

/presenter/2018

I will be taken to /pages/speaker.js with query.ccyear set to 2018

The second case works as I expect (/presenter/2018) does take me to /pages/speaker.js, but (/presenter/2018/douglas-crockford-1124 gives me a 404.

What am I not understanding and why does this not work?

In my /pages/speaker and /pages/speakerdetail:

    static async getInitialProps({query}) {...}

Answer 1

For optional parameters in your route, add a trailing ? and adjust speaker.js to render either the year view or detail view based on whether the query.slugSpeaker is undefined.

routes.add
    ('speaker', '/presenter/:ccyear/:slugSpeaker?');