Sousdomaines Next.js Wildcard —

Un « joker » ? Quoi dans le monde? Excellente question, ces types de domaine proviennent des Wildcard DNS Records qui ressemblent à ceci :

*.example. 3600 TXT "Wild! Vous avez trouvé un joker."

Lorsqu'il est utilisé, cet enregistrement DNS fera en sorte que tout sous-domaine correspondant au caractère générique contiendra une valeur TXT : « Wild ! Vous avez trouvé un caractère générique. "

Par exemple, si cela a été défini sur le domaine smashingmagazine.comapples.example.smashingmagazine.com et oranges.example .smashingmagazine.com renverrait tous deux la valeur TXT ci-dessus. Le même principe peut également être appliqué aux enregistrements CNAME et A.

Cas d'utilisation sauvage pour les caractères génériques

Les caractères génériques peuvent être utilisés pour un large éventail de choses. Pour l'instant, concentrons-nous sur les endroits où ils peuvent être appliqués en combinaison avec Next.js :

1. Fournir des services hébergés
   L'utilisation la plus courante des domaines génériques est de fournir aux utilisateurs de services hébergés leur propre espace avec un sous-domaine unique. Par exemple, si je construisais une plate-forme pour que les restaurants hébergent des plates-formes de commande numérique avec le domaine menus.abcje pourrais proposer Dom's Pizzeria domspizzeria.menus.abc et Magical Prata le domaine magicalprata.menus.abc. L'avantage est de donner à chacun de ces établissements son espace clos qu'il peut personnaliser et aménager. Cet espace peut agir comme son propre site Web, sans lien avec quoi que ce soit. de cela serait comment Medium fournit des sous-domaines pour les auteurs.
2. Cas d'utilisation plus créatifs plus sauvages
   Vous ne pouvez pas définir ces cas d'utilisation, mais il existe de nombreux cas d'utilisation créative de ces styles de domaines. Par exemple, plus loin dans cet article, nous développerons un jouet Web qui renverse une page Web, la rendant lisible pour les Australiens.

Les mises en garde des caractères génériques avec Next.js

Sigh. Malheureusement, l'utilisation de caractères génériques n'est pas parfaite, il existe quelques inconvénients :

• Plus de génération de site statique (et ISR)
  Malheureusement, il n'existe aucun système spécial pour fournir des pages personnalisées générées de manière statique pour différents sous-domaines génériques comme vous pouvez le faire avec le routage dynamique par exemple (où vous avez des fichiers [slug].js).
• Difficultés avec le développement
  Lors du développement local, il peut être difficile de simuler des domaines génériques et nous serons nous en parlerons un peu plus loin dans cet article, mais il est important de garder à l'esprit.
• Plateformes de déploiement limité
  Vercel prend en charge les domaines génériques, cependant, les autres plates-formes orientées Jamstack ne prennent pas toutes en charge les domaines génériques. Par exemple, Netlify limite la fonctionnalité à un groupe sélectionné d'utilisateurs sur le plan Pro. Nous allons nous concentrer sur trois endroits où vous pouvez obtenir le caractère générique :
  1. Côté serveur dans getServerSideProps,
  2. Côté client avec useEffect,
  3. Côté serveur sur l'API Routes et fonctions Edge .

  Plus après le saut ! Continuez à lire ci-dessous ↓

  Server Side In getServerSideProps

  C'est l'endroit le plus courant dans lequel vous devrez extraire le caractère générique, vous pouvez l'utiliser sur les pages où vous devez rendre complètement différent contenu pour différents caractères génériques. Comme indiqué ci-dessus, cela ne peut pas être fait via la génération de site statique, nous devons donc le faire sur les pages rendues côté serveur. objet de requête à l'aide de context.req. Dans cet objet de requête, vous pouvez accéder au nom d'hôte sur headers.hostqui renverra une chaîne telle que example.yourdomain.com. Nous pouvons diviser la chaîne en un tableau sur chaque période, puis accéder au premier élément dudit tableau. Dans le code, cela ressemble à ceci :

  exporter la fonction asynchrone getServerSideProps(context) {
    let wildcard = context.req.headers.host.split(".")[0] ;
    caractère générique =
      joker != "votredomaine"
        ? process.env.NODE_ENV != "développement"
          ? caractère générique
          : process.env.TEST_WILDCARD
        : "domicile";
    return { props: { wildcard } } ;
  }

  Comme vous pouvez le voir dans ce morceau de code, nous effectuons un traitement supplémentaire sur le caractère générique s'il s'agit du domaine de base, nous définissons le caractère générique sur home (si vous prenez l'entrée de l'utilisateur, c'est un cas vous devrez gérer) et si nous testons sur localhost, nous pouvons tester d'autres caractères génériques. Dans notre fonction d'exportation par défaut, qui rend notre page, nous pouvons utiliser une instruction switch pour gérer les caractères génériques :

  export default function App(props) {
    switch(props.wildcard) {
      cas "maison":
        retour 
  Bienvenue sur la page d'accueil !
   ;
        Pause;
      défaut:
        return 
  Le caractère générique est : {props.wildcard}.
   ;
    }
  }

  Côté client avec useEffect

  Si vous souhaitez uniquement apporter de petites modifications à chaque page sur un caractère générique différent, vous pouvez éviter d'utiliser le rendu côté serveur en utilisant le crochet useEffect sur le côté client. Cette approche sera assez similaire à la façon dont nous l'avons fait dans getServerSidePropssauf que nous nous appuierons sur window.location.hostname. L'utilisation de window signifie que le rendu initial du serveur ne pourra pas accéder aux informations, nous devons donc l'envelopper dans un hook useEffect qui s'exécute côté client. Voici à quoi ressemble ce code :

  // useEffect et useState doivent être importés de 'react'
  
  const [wildcard, setWildcard] = useState("")
    useEffect(() => {
      setWildcard(window.location.hostname.split(".")[0])
    }, [])

  Cette approche est cependant loin d'être parfaite car il y a un délai entre le premier rendu de la page et le caractère générique disponible. Par conséquent, si vous apportez des modifications drastiques sur la base du caractère générique, les modifications seront choquantes pour votre utilisateur. Cela peut également nuire à votre mesure cumulative de décalage de mise en page sur vos données vitales Web. Dans cet esprit, je recommande fortement de limiter votre utilisation de cette approche aux adaptations qui seraient hors de vue du spectateur lors de la charge initiale. Un exemple serait un pied de page de marque, sur une page de documentation technique. Il est bien sûr toujours utile de le savoir.

  Côté serveur sur les routes API et les fonctions Edge

  Les routes API sont un autre domaine à partir duquel vous souhaiterez peut-être accéder à un caractère générique. Heureusement, le même objet de requête dont nous avons parlé dans la section ci-dessus sur getServerSideProps est également disponible lors de l'utilisation d'une route API Node.js avec Next.js. Nous pouvons y accéder comme ceci :

  export default (req, res) => {
    let wildcard = req.headers.host.split(".")[0] ;
    caractère générique =
      joker != "votredomaine"
        ? process.env.NODE_ENV != "développement"
          ? caractère générique
          : process.env.TEST_WILDCARD
        : "domicile";
    res.json({ joker : joker })
  }

  Après cela, nous pouvons ensuite prendre certaines actions telles que récupérer différentes données de votre base de données en fonction du caractère générique et les renvoyer à partir de l'API.

  Cette même logique peut être appliquée aux nouvelles fonctions Edge de Next.js / Middleware. Cela vous permet d'utiliser des caractères génériques dans plusieurs routes sans dupliquer le code et d'accélérer le traitement à mesure que l'exécution du code se produit à la périphérie. Bien que la fonctionnalité soit encore en version bêta, c'est certainement quelque chose à surveiller.

  // _middleware.js
  middleware de fonction d'exportation (req) {
    let wildcard = req.headers.get("host").split(".")[0] ;
    console.log (caractère générique);
    caractère générique =
      joker != "votredomaine"
        ? process.env.NODE_ENV != "développement"
          ? caractère générique
          : process.env.TEST_WILDCARD
        : "domicile";
    console.log(process.env.TEST_WILDCARD);
    return new Response(JSON.stringify({ wildcard: wildcard }), {
      statut : 200,
      en-têtes : { "Content-Type": "application/json" },
    });
  }

  Le Aussie-izer

  Maintenant que nous avons exploré la théorie de cette stratégie, voyons comment nous la mettons en pratique. Dans cette section, nous adopterons cette approche pour créer un projet qui renverse les sites Web (enfin, les sites Web qui utilisent un domaine .com et ne sont pas des sous-domaines) appelé 🦘Aussie-izer.

  Pour commencer , nous allons vouloir exécuter yarn init puis yarn add next react-domet terminer en ajoutant ces scripts standard à notre package.json:

  "scripts": {
    "dev": "prochain dev",
    "build": "prochaine build",
    "start": "prochain démarrage",
    "lint": "prochaine peluche"
  }

  Dès que nous aurons un projet Next.js standard configuré, nous allons vouloir créer le seul fichier de code dont nous aurons besoin pour ce projet : pages/index.js.

  Tout d'abord, nous souhaitons ajouter la fonction getServerSideProps dans laquelle nous extrairons le caractère générique (car je l'héberge sur aussieizer.sampoder.com ) c'est ce que j'évaluerai sur home comme :

  exporter la fonction asynchrone getServerSideProps(context) {
    let wildcard = context.req.headers.host.split(".")[0] ;
    caractère générique =
      joker != "aussieizer"
        ? joker != "localhost:3000"
          ? caractère générique
          : process.env.TEST_WILDCARD
        : "domicile";
    return { props: { wildcard } } ;
  }

  Nous utiliserons ensuite ce caractère générique pour rendre un iFrame afin de remplir cette page (en retournant iFrame pour créer l'effet), avec notre src défini sur {`https ://${props.wildcard}.com`}. Nous utiliserons un cas de commutateur, comme nous l'avons vu ci-dessus, pour afficher une petite page d'aide s'ils visitent la page d'accueil :

  export default function App(props) {
    commutateur (props.wildcard) {
      cas "maison":
        revenir (
          
  
            Bienvenue dans l'Aussie-izer ! Cela ne fonctionne que pour les domaines .com. Si tu
            veux aussie-ize{" "}
            https://example.com visite{" "}
            
              https://example.aussieizer.sampoder.com
            .
          
        );
        Pause;
      défaut:
        revenir (
          
        );
    }
  }

  Et nous sommes prêts à partir ! La version live est disponible sur https://aussieizer.sampoder.com et le code source peut être trouvé sur https://github.com/sampoder/aussie-izer/.

  Hébergement/Déploiement

  Si vous hébergez sur un serveur personnalisé, les domaines génériques seront un jeu d'enfant à configurer via DNS. Cependant, une grande partie de l'utilisation de Jamstack est de pouvoir héberger sur des services tels que Vercel ou Netlify ; ces services ont leurs propres systèmes de gestion de domaine.

  Vercel

  Vercel prend en charge les domaines génériques prêts à l'emploi — pour tous les comptes. Pour les utiliser, visitez d'abord la section Domains de l'onglet Paramètres de votre déploiement. Ensuite, vous devrez entrer votre domaine en utilisant un * pour signifier le caractère générique.

  Pour l'exemple ci-dessus, j'ai entré :

  *.aussieizer.sampoder.com

  Vous très probablement voudra également ajouter votre domaine racine (aussieizer.sampoder.comdans mon cas) pour pouvoir fournir une page d'accueil ou des instructions, cependant, qui pourraient également être une base de code distincte.[19659066]Netlify

  Netlify limite sa fonctionnalité de caractères génériques aux comptes Pro ; si vous avez un compte Pro, vous devrez envoyer un e-mail à leur personnel d'assistance pour qu'ils activent ensuite l'option sur votre compte. Il apparaîtra dans la page des paramètres de domaine une fois activé.

  Render

  Render propose également des domaines génériques à tous les utilisateurs. Entrez simplement un domaine avec un * (signifiant votre caractère générique) dans l'entrée Ajouter un domaine personnalisé dans la section domaines personnalisés de la page des paramètres de votre site, ce qui activera le caractère générique. Veuillez noter que Render vous demandera d'ajouter des enregistrements supplémentaires à votre DNS afin qu'ils puissent émettre un certificat SSL LetsEncrypt (des instructions exactes vous seront affichées lorsque vous saisirez votre domaine générique).

  C'est tout. !

  Les domaines génériques passent souvent inaperçus — j'espère que vous avez aimé les explorer avec moi. Merci !

  Aussi : pour votre information, les Australiens ne voient pas vraiment à l'envers.

  Autres lectures sur Smashing Magazine

  (vf, yk, il)