Parameterized routing

community_index.jsx

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

function Community(props) {
  const { params, community, channel } = props;

  if (Boolean(params.channelId)) {
    return <ChannelPage channel={channel} />
  }

  if (Boolean(params.communityId)) {
    return <CommunityPage community={community} />
  }

  return <FeaturedCommunities />
}

Community.getInitialProps = async ({ params }) => {
  const { communityId, channelId } = params;
  let community, channel;
  // fetch community & channel if their params are present.
  // So if /communities/styled-components, just the community,
  // if it includes a channelId then also fetch that.
  // Or don't and leave it up to the component you render above
  // with a <Query /> component or some such.
  return { community, channel };
}

export default withParams('communityId', 'channelId')(Community);