# General Translation React SDKs (gt-react, gt-next, gt-react-native): useLocalizeHref
URL: https://generaltranslation.com/ja/docs/react/nextjs/reference/hooks/use-localize-href.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: リンクをレンダリングしないナビゲーション向けに、App Router のパスをローカライズします。useLocalizeHref の API リファレンスです。

`useLocalizeHref` フックは、[`<Link>`](/docs/react/nextjs/link) と同じルールでパスをローカライズする関数を返します。`router.push()` やコンポーネントの `href` プロパティなど、`<Link>` をレンダリングせずにナビゲーションを行う場合に使用します。

クライアントコンポーネントでは `gt-next/link` から、サーバーコンポーネントとクライアントコンポーネントのどちらでも使う場合は `gt-next` から import してください。async なサーバーコードでは、[`getLocalizeHref`](/docs/react/nextjs/reference/functions/get-localize-href) を使用します。

## 概要 [#overview]

```tsx title="components/CheckoutButton.tsx"
'use client';

import { useRouter } from 'next/navigation';
import { useLocalizeHref } from 'gt-next/link';

export function CheckoutButton() {
  const router = useRouter();
  const localizeHref = useLocalizeHref();

  return (
    <button onClick={() => router.push(localizeHref('/checkout'))}>
      Checkout
    </button>
  );
}
```

## 戻り値 [#returns]

**型** `(href: string, locale?: string | false) => string`

`href` を現在のロケール向け(`locale` が指定された場合はそのロケール向け)にローカライズする関数です。`false` を渡すと、`href` を変更せずにそのまま返します。

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.