Url is deprecated in nextjs version 6.x

[antiproblemist]

The {this.props.url.query.slug} property can no longer be accessed in next version 6 and above as the url property has been deprected. The workaround is given at Url is deprecated

[JeromeFitz]

After going through next-routes source code and the change with the magic url, this is now working for me with no updates to next-routes.

es5

const NextRouter = require('next/router')
const routes = require('next-routes')

//                                                         // Name   Page      Pattern
module.exports = NextRouter.withRouter(
  routes() //                                              // ----   ----      -----
    .add('about') //                                       // about  about     /about
    .add('blog', '/blog/:slug') //                         // blog   blog      /blog/:slug
    .add('user', '/user/:id', 'profile') //                // user   profile   /user/:id
    .add('/:noname/:lang(en|es)/:wow+', 'complex') //      // (none) complex   /:noname/:lang(en|es)/:wow+
    .add({ name: 'beta', pattern: '/v3', page: 'v3' }) //  // beta   v3        /v3
)

es6 (📝️This code needs to be compiled appropriately server-side)

import { withRouter } from 'next/router'
import nextRoutes from 'next-routes'

const routes = nextRoutes()
//                                                        // Name   Page      Pattern
routes() //                                               // ----   ----      -----
  .add('about') //                                        // about  about     /about
  .add('blog', '/blog/:slug') //                          // blog   blog      /blog/:slug
  .add('user', '/user/:id', 'profile') //                 // user   profile   /user/:id
  .add('/:noname/:lang(en|es)/:wow+', 'complex') //       // (none) complex   /:noname/:lang(en|es)/:wow+
  .add({ name: 'beta', pattern: '/v3', page: 'v3' }) //   // beta   v3        /v3

export default withRouter(routes)

export const { Link, Router } = withRouter(routes)

One thing to note in both of these cases, if you want to disable file-system routing via Next.js you will also need to add the following flag to the next.config.js:

useFileSystemPublicRoutes: false

That will stop from showing a route like /blog in the above example, when you may strictly want to limit it to /blog/:slug.

I will do a PR to update the README in next-routes and a PR for the example at Next.js. 😁

[JeromeFitz]

🤦️- Well, the issue I was having in what I seemed to believe was a by-product to your original post seems like they are/ were two different issues altogether.

Mine was solved by ensuring my ./pages/*.js were wrapped with withRouter, and turning useFileSystemPublicRoutes to false.

Sorry if I got anyone's hopes up. I can no longer duplicate the error I was experiencing related to Url. I'll just leave while I'm behind.

I caught the discrepancy when I was checking in the Next.js PR and realized I didn't pass the withRouter logic to it, and it was working as expected.

[antiproblemist]

So the final solution is to wrap your ./pages/*.js file with withRouter and access this.props.router.query in your file