Pass variables from custom server to components in NextJS

Question

I have set up a custom server in NextJS as illustrated here for custom routing.

server.js:

app.prepare()
  .then(() => {
    createServer((req, res) => {
      const parsedUrl = parse(req.url, true)
      const { pathname, query } = parsedUrl

      if (foreignLang(pathname, lang)) {
        app.render(req, res, checkLangAndConvert(links, pageVal, pathname, lang), query)
      } else {
        handle(req, res, parsedUrl)
      }
    })
      .listen(port, (err) => {
        if (err) throw err
        console.log(`> Ready on http://localhost:${port}`)
      })
  })

it basically maps /en/url to /another_url for i18n.

I understand I can use query parameter here and read it in the component, but I would like to pass options to the App without rechecking the URL. Is it possible to pass options from server level to app level without reading the URL?

Edit: After a bit of investigating the marked answer explained that query actually does not mean query-paramter in the URL, rather than passing a value from the server to client. Misleading word as it indicates only client side action. This was exactly what I needed.

iurii · Accepted Answer · 2018-10-05 09:06:38Z

7

Here is an example of custom-server-express where they pass id from server to client side

So in your case it will be something like this

server.js

const { createServer } = require('http');
const { parse } = require('url');
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();

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true);
    const { pathname, query } = parsedUrl;

    if (pathname === '/pl/index') {
      app.render(req, res, '/index', { ...query, lang: 'pl' });
    } else if (pathname === '/en/index') {
      app.render(req, res, '/index', { ...query, lang: 'en' });
    } else {
      handle(req, res, parsedUrl);
    }
  }).listen(port, err => {
    if (err) throw err;
    console.log(`> Ready on http://localhost:${port}`);
  });
});

pages/index.js

import React from 'react';
import { withRouter } from 'next/router';

function IndexPage(props) {
  return <h1>index lang: {props.router.query.lang}</h1>;
}

export default withRouter(IndexPage);

Going to /pl/index will render index lang: pl and

going to /en/index will render index lang: en accordingly

Hope this helps!

edited Oct 5, 2018 at 9:06

answered Oct 5, 2018 at 9:01

iurii

4,2062 gold badges27 silver badges30 bronze badges

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

17 Comments

supersize Over a year ago

Thanks man, I just realised I have fixed it myself. The problem is that query is a bit misleading as it indicates that it is an URL query, but actually it is just the name of passing data forward from the server to initalProps. So I actually solved it. :)

iurii Over a year ago

agree, it was confusing for me at first as well

supersize Over a year ago

So just one additional question here, although I have solved the issue I'd like to ask what withRouter does here. Is it the replacement for getting getInitialProps from the server? I don't use withRouter at all and it still works just fine with getInitialProps for a custom _app. Intrigued to know.

iurii Over a year ago

withRouter is a higher order component that injects router into any component. I think both ways are fine. The main difference that getInitialProps will initially get executed on server.

iurii Over a year ago

I'm learning nextjs as well so might be wrong somewhere :D but that's how I understand it so far.

|

Collectives™ on Stack Overflow

Pass variables from custom server to components in NextJS

1 Answer 1

17 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

17 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related