I have a clean url that contains some query param like this.

http://localhost:3000/post/:id

I'm trying to capture the query parameter 'id' on the client side like this.

static async getInitialProps({req, query: { id }}) {
    return {
        postId: id
    }
}

render() {
  const props = { 
       data: {
          'id': this.props.postId        // this query param is undefined
       }
  }
  return (
     <Custom {...props}>A ponent</Custom>
  )
}

My express endpoint looks like this.

app.post(
    '/post/:id',
    (req, res, next) => {
        let data = req.body;
        console.log(data);
        res.send('Ok');
    }
);

But my server side console output ends up like this.

{ id: 'undefined' }

I've read the docs and the github issues but I can't seem to understand why this is happening.

I have a clean url that contains some query param like this.

http://localhost:3000/post/:id

I'm trying to capture the query parameter 'id' on the client side like this.

static async getInitialProps({req, query: { id }}) {
    return {
        postId: id
    }
}

render() {
  const props = { 
       data: {
          'id': this.props.postId        // this query param is undefined
       }
  }
  return (
     <Custom {...props}>A ponent</Custom>
  )
}

My express endpoint looks like this.

app.post(
    '/post/:id',
    (req, res, next) => {
        let data = req.body;
        console.log(data);
        res.send('Ok');
    }
);

But my server side console output ends up like this.

{ id: 'undefined' }

I've read the docs and the github issues but I can't seem to understand why this is happening.

• javascript
• express
• next.js

• did you check location.pathname? – dfsq Commented Feb 11, 2018 at 22:06
• yup, just did the path is there /post/B1L8VE0UF – cocoPuffs Commented Feb 12, 2018 at 0:53
• I guess I could just insert location.pathname directly inside rather then using query. – cocoPuffs Commented Feb 12, 2018 at 4:16
• I think you need to use both depending on execution environment. – dfsq Commented Feb 12, 2018 at 8:43

1 Answer 1

Your frontend code is correct, fetching the post id from the query string is the way to go.

However your backend code is incorrect, first you need to use a GET route to render a Next.js page, and you must extract the path params to craft the final query params as a bination from both the regular query params as well as those path params, this could look like this using express:

const app = next({ dev: process.env.NODE_ENV === 'development' });
app.prepare().then(() => {
  const server = express();
  server.get('/post/:id', (req, res) => {
    const queryParams =  Object.assign({}, req.params, req.query);
    // assuming /pages/posts is where your frontend code lives
    app.render(req, res, '/posts', queryParams);
  });
});

Check this Next.js example: https://github./zeit/next.js/tree/canary/examples/parameterized-routing for more info.