Express Route and Nextjs: app.render doesn't work in router file

Question

My server file started to get a little too long, so I decided to use express routing and split each route on a separate script. I did everything as usual but the problem is: app render method does not work and the page just keeps scrolling. This is what the index file looks like:

const express = require('express');
const router = express.Router();
const Declaration = require("../models/declaration")
const next = require('next')
const app = next({ true })

router.get('/', async (req, res) =>
{
    const declarations = await Declaration.find({})
    app.render(req, res, "/", { declarations })
})
router.post('/', async (req, res) =>
{
    const declaration = new Declaration({ ...req.body })
    await declaration.save();
    res.redirect("/")
})

module.exports = router;

Server file:

...

const index = require("./routes/index")


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

    server.use(express.urlencoded({ extended: true }));
    server.use(methodOverride('_method'));
    server.use(express.static(path.join(__dirname, 'public')));
    server.use('/', index)

    ...

This is what the routes looked like before updating:

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

    server.use(express.urlencoded({ extended: true }));
    server.use(methodOverride('_method'));
    server.use(express.static(path.join(__dirname, 'public')));

     server.get("/", async (req, res) =>
     {
         const declarations = await Declaration.find({})
         app.render(req, res, "/", { declarations })
     })
    server.post("/", async (req, res) =>
    {
        const declaration = new Declaration({ ...req.body })
        await declaration.save();
        res.redirect("/")
    })
    
...

I have really no ideea how to fix this.

Answer 1

I have found out a solution on another post (Using Express Router with Next.js). Basically what I had to do was to export app from the server file and use it on the router file instead of importing another one.

This is what it ends up like:

server

module.exports = app;
//make sure that app is exported before importing the router files
const index = require("./routes/index")
const view = require("./routes/view")
const edit = require("./routes/edit")

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

    server.use(express.urlencoded({ extended: true }));
    server.use(methodOverride('_method'));
    server.use(express.static(path.join(__dirname, 'public')));
    server.use('/', index)
    server.use('/view', view)
    server.use('/view', edit)

router file

const express = require('express');
const router = express.Router();
const Declaration = require("../models/declaration")
const app = require("../main")
//import app from the server file

router.get('/', async (req, res) =>
{
    const declarations = await Declaration.find({})
    app.render(req, res, "/", { declarations })
})

So now it should work as expected