Engine not found for the “.js” file extension

Question

I want to use koa-views with Koa and Koa-Router with Next.js. In previous projects, I had no issues with express but in this project, I have to use Koa. Using its router, I want to render a page: /some/page/:id . Following the same Nextjs way:

 router.get('/some/page/:id', async (ctx, next) => {
   const actualPage = '/some/page/id' // id.js (not actual name 😝)
   await ctx.render(actualPage, {/* could pass object */})
 });

That would work if I was using express. With Koa:

const Koa = require('koa');
const views = require('koa-views');
// const render = require('koa-views-render'); <-- I what's this?

[..] // Making things short here
const server = new Koa();
const router = new Router();

// My issue, I'm seeing tutorials using other engines: .ejs etc
// I'm not using any, I only have .js files
server.use(views(__dirname + "/pages", { extension: 'js' }));

Using the same router.get... function as above, I get:

Error: Engine not found for the ".js" file extension

When I go to /some/page/123 , I'd expect it to render the file /pages/some/page/id.js . How?

Answer 1

It turns out I do not need any extra modules to achieve this 🙀

Create a function called, ie, routes then pass app and router as a param

const routes = (router, app) => {

  router.get('/some/page/:id', async (ctx) => {
    const { id } = ctx.params
    const actualPage = '/some/page/id'

    // Render the page
    await app.render(ctx.req, ctx.res, actualPage, {foo: 'Bar'})
  }

}

module.exports = routes

Inside your server.js file:

// const routes = require('./routes);
// const app = next({ dev }); // import other modules for this section
// app.prepare().then(() => {
//   const router = new Router();
//   [..]
//   routes(router, app)
// })

The commented out section is a slim down version to make a point in where things should be.