Maison interface Web js tutoriel Création d'un commutateur de devises automatique dans Next.js

Création d'un commutateur de devises automatique dans Next.js

Jan 03, 2025 am 08:33 AM

Prérequis
Avant de commencer, assurez-vous d'avoir une compréhension de base de Next.js et de React.

1. Création de la route API backend

Nous allons créer une route API Next.js qui interagit avec notre API de géolocalisation.
Créez un nouveau fichier à l'adresse : src/app/api/geolocation/route.ts

import { NextResponse } from "next/server";
import axios from "axios";

type IPGeolocation = {
    ip: string;
    version?: string;
    city?: string;
    region?: string;
    region_code?: string;
    country_code?: string;
    country_code_iso3?: string;
    country_fifa_code?: string;
    country_fips_code?: string;
    country_name?: string;
    country_capital?: string;
    country_tld?: string;
    country_emoji?: string;
    continent_code?: string;
    in_eu: boolean;
    land_locked: boolean;
    postal?: string;
    latitude?: number;
    longitude?: number;
    timezone?: string;
    utc_offset?: string;
    country_calling_code?: string;
    currency?: string;
    currency_name?: string;
    languages?: string;
    country_area?: number;
    asn?: string; // Append ?fields=asn to the URL
    isp?: string; // Append ?fields=isp to the URL
}

type IPGeolocationError = {
  code: string;
  error: string;
}

export async function GET() {
  // Retrieve IP address using the getClientIp function
  // For testing purposes, we'll use a fixed IP address
  // const clientIp = getClientIp(req.headers);

  const clientIp = "84.17.50.173";

  if (!clientIp) {
    return NextResponse.json(
      { error: "Unable to determine IP address" },
      { status: 400 }
    );
  }

  const key = process.env.IPFLARE_API_KEY;

  if (!key) {
    return NextResponse.json(
      { error: "IPFlare API key is not set" },
      { status: 500 }
    );
  }

  try {
    const response = await axios.get<IPGeolocation | IPGeolocationError>(
      `https://api.ipflare.io/${clientIp}`,
      {
        headers: {
          "X-API-Key": key,
        },
      }
    );

    if ("error" in response.data) {
      return NextResponse.json({ error: response.data.error }, { status: 400 });
    }

    return NextResponse.json(response.data);
  } catch {
    return NextResponse.json(
      { error: "Internal Server Error" },
      { status: 500 }
    );
  }
}
Copier après la connexion

2. Obtention de votre clé API

Nous allons utiliser un service de géolocalisation gratuit appelé IP Flare. Visitez la page Clés API : accédez à la page Clés API.

Visite : www.ipflare.io

À partir de la page Clés API, nous pouvons obtenir notre clé API et utiliser la copie rapide pour la stocker en tant que variable d'environnement dans notre fichier .env. Nous l'utiliserons pour authentifier nos demandes.
Building an Automatic Currency Switcher in Next.js

3. Création du composant frontend

J'ai créé ce composant tout-en-un qui inclut le fournisseur et le sélecteur de devises. J'utilise shadcn/ui et quelques SVG de drapeaux que j'ai trouvés en ligne.

Vous devrez envelopper l'application dans le fichier <CurrencyProvider /> afin que nous puissions accéder au contexte.

Maintenant, n'importe où dans l'application où nous voulons accéder à la devise, nous pouvons utiliser le hook const { monnaie } = useCurrency();.

Pour intégrer cela à Stripe, lorsque vous créez le paiement, il vous suffit d'envoyer la devise et de vous assurer que vous avez ajouté des tarifs multidevises à vos produits Stripe.

"use client";

import { useRouter } from "next/navigation";
import {
  createContext,
  type FC,
  type ReactNode,
  useContext,
  useEffect,
  useMemo,
  useState,
} from "react";
import axios from "axios"; // 1) Import axios
import { Flag } from "~/components/flag";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "~/components/ui/select";
import { cn } from "~/lib/utils";
import { type Currency } from "~/server/schemas/currency";

// -- [1] Create a local type for the data returned by /api/geolocation.
type GeolocationData = {
  country_code?: string;
  continent_code?: string;
  currency?: string;
};

type CurrencyContext = {
  currency: Currency;
  setCurrency: (currency: Currency) =&gt; void;
};

const CurrencyContext = createContext&lt;CurrencyContext | null&gt;(null);

export function useCurrency() {
  const context = useContext(CurrencyContext);
  if (!context) {
    throw new Error("useCurrency must be used within a CurrencyProvider.");
  }
  return context;
}

export const CurrencyProvider: FC&lt;{ children: ReactNode }&gt; = ({ children }) =&gt; {
  const router = useRouter();

  // -- [2] Local state for geolocation data
  const [location, setLocation] = useState&lt;GeolocationData | null&gt;(null);
  const [isLoading, setIsLoading] = useState&lt;boolean&gt;(true);

  // -- [3] Fetch location once when the component mounts
  useEffect(() =&gt; {
    const fetchLocation = async () =&gt; {
      setIsLoading(true);
      try {
        const response = await axios.get("/api/geolocation");
        setLocation(response.data);
      } catch (error) {
        console.error(error);
      } finally {
        setIsLoading(false);
      }
    };

    void fetchLocation();
  }, []);

  // -- [4] Extract currency from location if present (fallback to "usd")
  const geoCurrency = location?.currency;

  const getInitialCurrency = (): Currency =&gt; {
    if (typeof window !== "undefined") {
      const cookie = document.cookie
        .split("; ")
        .find((row) =&gt; row.startsWith("currency="));
      if (cookie) {
        const value = cookie.split("=")[1];
        if (value === "usd" || value === "eur" || value === "gbp") {
          return value;
        }
      }
    }
    return "usd";
  };

  const [currency, setCurrencyState] = useState&lt;Currency&gt;(getInitialCurrency);

  useEffect(() =&gt; {
    if (!isLoading &amp;&amp; geoCurrency !== undefined) {
      const validatedCurrency = validateCurrency(geoCurrency, location);
      if (validatedCurrency) {
        setCurrency(validatedCurrency);
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isLoading, location, geoCurrency]);

  // -- [5] Update currency &amp; store cookie; no more tRPC invalidation
  const setCurrency = (newCurrency: Currency) =&gt; {
    setCurrencyState(newCurrency);
    if (typeof window !== "undefined") {
      document.cookie = `currency=${newCurrency}; path=/; max-age=${
        60 * 60 * 24 * 365
      }`; // Expires in 1 year
    }
    // Removed tRPC invalidate since we are no longer using tRPC
    router.refresh(); 
  };

  const contextValue = useMemo&lt;CurrencyContext&gt;(
    () =&gt; ({
      currency,
      setCurrency,
    }),
    [currency],
  );

  return (
    &lt;CurrencyContext.Provider value={contextValue}&gt;
      {children}
    &lt;/CurrencyContext.Provider&gt;
  );
};

export const CurrencySelect = ({ className }: { className?: string }) =&gt; {
  const { currency, setCurrency } = useCurrency();
  return (
    &lt;Select value={currency} onValueChange={setCurrency}&gt;
      &lt;SelectTrigger className={cn("w-[250px]", className)}&gt;
        &lt;SelectValue placeholder="Select a currency" /&gt;
      &lt;/SelectTrigger&gt;
      &lt;SelectContent&gt;
        &lt;SelectGroup className="text-sm"&gt;
          &lt;SelectItem value="usd"&gt;
            &lt;div className="flex items-center gap-3"&gt;
              &lt;Flag code="US" className="h-4 w-4 rounded" /&gt; &lt;span&gt;$ USD&lt;/span&gt;
            &lt;/div&gt;
          &lt;/SelectItem&gt;
          &lt;SelectItem value="eur"&gt;
            &lt;div className="flex items-center gap-3"&gt;
              &lt;Flag code="EU" className="h-4 w-4 rounded" /&gt; &lt;span&gt;€ EUR&lt;/span&gt;
            &lt;/div&gt;
          &lt;/SelectItem&gt;
          &lt;SelectItem value="gbp"&gt;
            &lt;div className="flex items-center gap-3"&gt;
              &lt;Flag code="GB" className="h-4 w-4 rounded" /&gt; &lt;span&gt;£ GBP&lt;/span&gt;
            &lt;/div&gt;
          &lt;/SelectItem&gt;
        &lt;/SelectGroup&gt;
      &lt;/SelectContent&gt;
    &lt;/Select&gt;
  );
};

// -- [6] Use our new GeolocationData type in place of RouterOutputs
const validateCurrency = (
  currency: string,
  location?: GeolocationData | null,
): Currency | null =&gt; {
  if (currency === "usd" || currency === "eur" || currency === "gbp") {
    return currency;
  }

  if (!location) {
    return null;
  }

  if (location.country_code === "GB") {
    return "gbp";
  }

  // Check if they are in the EU
  if (location.continent_code === "EU") {
    return "eur";
  }

  // North America
  if (location.continent_code === "NA") {
    return "usd";
  }

  return null;
};
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Remplacer les caractères de chaîne en javascript Remplacer les caractères de chaîne en javascript Mar 11, 2025 am 12:07 AM

Remplacer les caractères de chaîne en javascript

Tutoriel de configuration de l'API de recherche Google personnalisé Tutoriel de configuration de l'API de recherche Google personnalisé Mar 04, 2025 am 01:06 AM

Tutoriel de configuration de l'API de recherche Google personnalisé

Exemple Couleurs Fichier JSON Exemple Couleurs Fichier JSON Mar 03, 2025 am 12:35 AM

Exemple Couleurs Fichier JSON

8 Superbes plugins de mise en page JQuery Page 8 Superbes plugins de mise en page JQuery Page Mar 06, 2025 am 12:48 AM

8 Superbes plugins de mise en page JQuery Page

10 Highlighters de syntaxe jQuery 10 Highlighters de syntaxe jQuery Mar 02, 2025 am 12:32 AM

10 Highlighters de syntaxe jQuery

Créez vos propres applications Web Ajax Créez vos propres applications Web Ajax Mar 09, 2025 am 12:11 AM

Créez vos propres applications Web Ajax

Qu'est-ce que & # x27; ceci & # x27; en javascript? Qu'est-ce que & # x27; ceci & # x27; en javascript? Mar 04, 2025 am 01:15 AM

Qu'est-ce que & # x27; ceci & # x27; en javascript?

10 tutoriels JavaScript & jQuery MVC 10 tutoriels JavaScript & jQuery MVC Mar 02, 2025 am 01:16 AM

10 tutoriels JavaScript & jQuery MVC

See all articles