Next.js: Api Calls from express server

[mulikaminker]

i try to fetch json object from express server. it's works fine in dev mode, but whene i release the app to heroku i get the next error: "TypeError: req.get is not a function".

my server.js file:

`const express = require('express')
   const next = require('next')
   const mongoose = require('mongoose')
   const morgan = require('morgan')

   const dev = process.env.NODE_ENV !== 'production'
   const app = next({ dev })
    const handle = app.getRequestHandler()


      var statusController = require('./controllers/status');

      mongoose.connect("****");
     mongoose.connection.on('error', function() {
      process.exit(1);
     });

   app.prepare()
    .then(() => {
     const server = express()
     server.use(morgan(dev ? 'dev' : 'common'))

   server.get('/api/posts', statusController.getAll);

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

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

index.js:

 ``import React from 'react'
     import Link from 'next/link'
    import 'isomorphic-fetch'
      export default class MyPage extends React.Component {
     static async getInitialProps ({ req }) {
// eslint-disable-next-line no-undef
 const baseUrl = req ? `${req.protocol}://${req.get('Host')}` : '';
 const res = await fetch(baseUrl + '/api/posts')
 const json = await res.json()
 return { posts: json }
}

 render () {
    return (
  <div>
   {this.props.posts.map(({_id, title, body, mageUrl}) => (
     <div key={_id}>
      <h2> {title} </h2>
      <img src={imageUrl} />
    </div>

  ))}
   </div>
    )
  }

}
``

when i make a get request to "my-heroku-app-url/api/posts" the server respons with the 404 next.js page.

[akiran]

@kamish24six I think first argument to getInitialProps is req.
so you should use

static async getInitialProps (req) {
}

instead of

static async getInitialProps ({ req }) {
}

[sergiodxa]

@akiran getInitialProps receive an object (context) with the parameters req (server side), res (server side), pathname, query, jsonPageRes (client side) and err

[supra28]

Try req.headers.host istead of req.get('Host')

[timneutkens]

As @supra28 said. It should be req.headers.host.

In your next app, assume req/res are:
req = http.IncomingMessage: https://nodejs.org/api/http.html#http_class_http_incomingmessage
res = http.ServerResponse: https://nodejs.org/api/http.html#http_class_http_serverresponse

[tomsoderlund]

When I run Next.js on Heroku, req.protocol reports "http" when it should be "https" - is this a Heroku issue or Next.js issue?

[timneutkens]

@tomsoderlund probably cause it's proxied https, the instance itself isn't providing https, a load balancer is. I guess you can use req.headers['x-forwarded-proto'] 👍

[timneutkens]

Same would work on now btw 👍

[tomsoderlund]

Thanks @timneutkens, x-forwarded-proto worked just fine! My code:

const protocol = req.headers['x-forwarded-proto'] || 'http';
const baseUrl = req ? `${protocol}://${req.headers.host}` : '';

[lock[bot]]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.