getServerSideProps内で、２バイト文字のパラメーター含むURLにgetしたらエラーになった

状況

途中までuseEffectで実装してて問題はなかったのですが、SSRに変更したら２バイト文字を含むURLにgetした時だけエラーになることが分かりました

環境

 "next": {
      "version": "10.0.5"
}

ダメだった例

  const url = 
    `${process.env.NEXT_PUBLIC_API_ENDPOINT}/api/${word}`
  ;
  return axios.get(url).then(({ data }) => ({
    posts: data.posts
  }));

エラー文

Server Error
TypeError: Request path contains unescaped characters

This error happened while generating the page. Any console logs will be displayed in the terminal window.

どうやら２バイト文字はだめっぽい感じ（他の１バイト文字列のパラメーターだとこのエラーはでない）

encodeすればいけるらしい

  const url = encodeURI(   
    `${process.env.NEXT_PUBLIC_API_ENDPOINT}/api/${word}`
  );

に変更したら動きました。
やったぜ！！！！

一応全体を貼っておきます

const fetchData = async word => {
  const url = encodeURI(   
    `${process.env.NEXT_PUBLIC_API_ENDPOINT}/api/${word}`
  );
  return axios.get(url).then(({ data }) => ({
    posts: data.posts
  }));
};

export const getServerSideProps = async ({ params }) => {
  const data = await fetchData(params.word);
  return {
    props: {
      posts: data ? data.posts : []
    }
  };
};

まとめ

にわかなのでこれから色々覚える所存！！！