● next.js で 現在のURLパスを取得する

・/docs/[id]/ で取得する場合

import { useRouter } from "next/router";
const { pathname } = useRouter()

・/docs/123456/ で取得する場合

import { useRouter } from "next/router";
const { asPath } = useRouter()

・/docs/[id]/ で定義したルートに 現在 /docs/123456/ でアクセスしているときのIDの取得方法

import { useRouter } from 'next/router';

const router = useRouter();
const docId = router.query.id; // 123456

● getServerSideProps() にてURLクエリパラメーターを取得する

http://localhost:3002/test?page=12

/pages/ 内の .tsx ファイルのgetServerSideProps()にてURLパラメーターを取得する方法です。 これだと props で コンポーネントに渡されるので router.isReady を待つ必要がありません。

/src/pages/test.tsx

import { MyComponent } from '@/components/MyComponent';
import { GetServerSidePropsContext, NextPage } from 'next';

interface Props {
  page: number;
}

export async function getServerSideProps(context: GetServerSidePropsContext):Promise<{props:Props}> {
  const { page: queryPage } = context.query;
  const page = queryPage ? Number(queryPage) : 999;
  return {
    props: {
      page,
    },
  };
}

const Test: NextPage<Props> = (props ) => {
  return (
    <>
      <h1>Hello Test</h1>
      <h5>{props.page}</h5>
      <MyComponent page={props.page} />
    </>
  );
};

export default Test;