Extract parameters from url in nextjs

extract-params-from-url-nextjs.js

// Variant 1.

import { useRouter } from 'next/router';

const MyComponent = () => {
  const router = useRouter();
  const { query: { id } } = router;

  return (
    <h1>ID: {id}</h1>
  )
}

export default MyComponent;


// Variant 2.

const MyComponent = ({ query: { id }}) => {
  return (
    <h1>ID: {id}</h1>
  )
}

MyComponent.getInitialProps = ({ query }) => ({ query })

export default MyComponent;


// Variant 3.

import React from 'react';

class MyComponent extends React.Component {

  static getInitialProps({ query }) {
    return { query }
  }

  render() {
    const { query: { id }} = this.props;

    return (
      <h1>ID: {id}</h1>
    )
  }
}

export default MyComponent;