Using Express Router with Next.js

Question

I'm trying to use the Express Router with Next.js using their custom-express-server example as my boilerplate. The only difference is that I'm trying to define the routes externally on routes/router.js as follows:

Code in server.js:

const express = require('express')
const next = require('next')

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
const routes = require('./routes/router')

app.prepare()
  .then(() => {
    const server = express()

    server.use('/', routes)

    server.get('*', (req, res) => {
      return handle(req, res)
    })

    server.listen(port, (err) => {
      if (err) throw err
      console.log(`> Ready on http://localhost:${port}`)
    })
  })

module.exports = app;

Code in routes/router.js:

const express = require('express'),
app = require('../server.js'),
router = express.Router();

router.get('/a', (req, res) => {
  return app.render(req, res, '/b', req.query)
})

router.get('/b', (req, res) => {
  return app.render(req, res, '/a', req.query)
})

router.get('/posts/:id', (req, res) => {
  return app.render(req, res, '/posts', { id: req.params.id })
})

module.exports = router;

At this point, even when I'm importing "app" from server.js, app is not available within router.js.

Is my logic incorrect? If it's not, then why is app not available within router.js?

ForrestLyman · Accepted Answer · 2018-07-24 15:18:31Z

2

You might also try using next-routes, which I use on all of my Next project:

// server.js
const { createServer } = require('http');
const next = require('next');
const routes = require('./routes');

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handler = routes.getRequestHandler(app);

app.prepare().then(() => {
    createServer(handler).listen(port, err => {
        if (err) {
            throw err;
        }
        console.log(`> Ready on http://localhost:${port}`);
    });
});

Then you can configure your routes in the routes.js file without accessing the app:

// routes.js

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

routes
    .add('landing', '/')
    .add('blog', '/blog', 'blog')
    .add('blog-post', '/blog/:postId', 'blog')

answered Jul 24, 2018 at 15:18

ForrestLyman

1,6532 gold badges19 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

moy2010 Over a year ago

Thanks for your suggestion, @ForrestLyman. I also considered next-routes as a solution, but I was tied to express due to the many express middlewares that this project requires.

moy2010 · Accepted Answer · 2018-07-24 04:35:35Z

1

Just solved it. This issue is known as a circular dependency, and it should be avoided at all costs... unless the pattern you're using (like the boilerplate I used, I guess...) requires it.

To solve it, just export from file "A" the dependency that file "B" uses before you require file "B" on file "A".

...And that's it pretty much.

answered Jul 24, 2018 at 4:35

moy2010

91012 silver badges25 bronze badges

1 Comment

corysimmons Over a year ago

Can you provide a code snippet example of your solution? I've tried what you said and it didn't help.

Collectives™ on Stack Overflow

Using Express Router with Next.js

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related