nextjs with custom api and react native app

[yazmnh87]

Hello,

I have a client app using nextjs("next": "9.1.5") and have implemented it using a custom server which also receives all my react native apps API requests. For deep linking in my react native app I'm using a res.redirect(appbundle://deeplink) but the request is being caught by nextjs and redirecting them to the client web app. I've tried some logic I thought may work in my server.js, please see below, any input is greatly appreciated.

//server.js//

nextApp.prepare().then(() =>{
const app = express();
if(process.env.NODE_ENV === 'development'){
app.use(morgan('dev'));
}

useMiddleware(app)
delegateRoutesFor(app)

app.use(errorHandler)

app.get('*', (req,res,next) =>{
const parsedUrl = parse(req.url, true)
console.log("NEXT",{parsedUrl})
if(parsedUrl.pathname !== '/api/auth/resetpassword'){
return handle(req,res)
}else{
next()
}
})

const PORT = process.env.PORT || 5000;
const server = app.listen(
PORT,
console.log(Server running ${process.env.NODE_ENV} mode on port ${PORT}.yellow.bold)
);

process.on('unhandledRejection', (e,promise)=> {console.log(e.message)
  server.close(()=> process.exit(1))
})

});

[jamesmosier]

Where in your server are you doing the redirect? I don't think I saw it. Is it within delegateRoutesFor? If so, could you show that?

This has worked for me in the past for redirecting:

const app = next({ dev });
const handler = app.getRequestHandler();

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

    server.get('/some-route', (req, res) => {
      res.redirect('appbundle://deeplink');
    });

    // catch-all handler to allow next to handle requests
    server.get('*', handler);

    server.listen(process.env.PORT, err => {
      if (err) throw err;
      console.log(
        `> Ready on http://localhost:${process.env.PORT}`
      );
    });
  })
  .catch(error => {
    console.error('Error preparing Next.js app', error);
    throw error;
  });

[yazmnh87]

Thank you for your reply, my route looks like this,

router.get('/resetpassword:resettoken', (req,res,next)=>{
res.redirect("'frequenciapp://pwreset'")
})

[yazmnh87]

I see something different im going to try in my code, you have server.get('*', handler);
I'll try what you have, hopefully something changes.

I have right now,
app.get('*', (req,res,next) =>{
const parsedUrl = parse(req.url, true)
console.log("NEXT",{parsedUrl})
if(parsedUrl.pathname !== '/api/auth/resetpassword'){
return handle(req,res)
}else{
next()
}
})

[jamesmosier]

What you have should be fine. I started a project using the custom-server-express example and was also able to get the redirect to happen:

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

  server.get('/google', (req, res) => {
    // redirect to an external site
    res.redirect('https://google.com');
  });

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

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

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

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

[yazmnh87]

Ok, Thank you, I'll try putting my route outside of that delegateRoutes function, this all that is. I'll update once I figure this one out.

function delegateRoutesFor(app){
// console.log(app)
app.use('/api/auth', auth)
app.use('/api/users', users);
app.use('/api/surveys', surveys);
app.use('/api/email', email)
app.use('/api/responses', responses)
app.use('/api/pushnotifs', pushnotifs)

return app;
}

module.exports = delegateRoutesFor;