Thierry  Perret

Thierry Perret

1642494911

Premiers Pas Avec Next.js - Une Bibliothèque React De Projet Requise

J'ai composé ce guide pour vous donner un aperçu pratique de la bibliothèque React peut-être la plus importante que vous utiliserez pour construire 90% de vos projets : Next.js.

L'objectif de ce tutoriel est de vous permettre de commencer à utiliser Next.js aussi facilement que possible.

Ce n'est pas un guide complet sur Next, mais il vous donnera tout ce dont vous avez besoin pour comprendre :

  • Qu'est-ce que Next.js (et pourquoi vous devriez commencer à l'utiliser pour vos projets React)
  • Comment effectuer des tâches essentielles à l'aide de Next.js
  • De plus, comment Next.js vous aidera à créer de meilleures applications React, plus rapidement

Plongeons-nous !

J'ai aidé des centaines de personnes à passer de débutants à des développeurs React embauchés. Vous voulez faire la même chose ? Découvrez le React Bootcamp .

Table des matières

  • Qu'est-ce que Next.js ?
  • Quelles fonctionnalités Next.js vous offre
  • Quelles fonctionnalités Next.js n'a pas
  • Comment créer une application Next.js
  • Scripts Next.js
  • Ajouter TypeScript à Next.js
  • Pages et itinéraires
  • Liens et navigation
  • Référencement dans Next.js
  • Itinéraires d'API
  • Demander des données côté client
  • Demander des données côté serveur
  • GetServerSideProps
  • GetStaticProps
  • Où apprendre ensuite.js

Qu'est-ce que Next.js ?

L'outil ultime pour tout développeur React pour apprendre et améliorer ses propres projets est, sans aucun doute, Next.js .

La page d'accueil NextJS.org

Que je construise un site statique avec interactivité comme un blog, ou un projet complet très dynamique comme une application de médias sociaux, je recherche presque toujours Next .

La première raison pour laquelle vous utilisez Next est, comme l'indique le titre de la bannière, parce qu'il s'agit d'un framework React .

Considérez-le comme un moyen "avec piles" de créer vos applications React, ce qui vous offre la simplicité d'outils tels que Create React App, combinés à une suite d'autres fonctionnalités super puissantes.

Bien qu'il s'agisse d'un framework, Next.js conserve une partie de la philosophie de React consistant à ne pas avoir d'opinion. Next vous offre des fonctionnalités pour améliorer votre expérience de développement globale, mais ne limite pas le nombre d'options parmi lesquelles vous pouvez choisir.

En fait, étant donné ce que Next rend possible pour les applications React, je dirais qu'il a vraiment élargi le nombre d'options à votre disposition, si vous en avez besoin.

Vous pouvez avoir une idée plus complète de tout ce dont les applications Next.js sont capables en consultant des centaines d'exemples de projets Next.js sur nextjs.org/examples :

Next.js Exemples

Vous y trouverez des exemples sur la façon de créer les applications Next (React) suivantes :

  • Un blog utilisant Markdown / MDX ou Wordpress
  • Une application e-commerce utilisant Shopify
  • Un site utilisant des systèmes de gestion de contenu comme Contentful ou Sanity
  • Un projet full-stack avec GraphQL et Authentication

Et des tonnes de plus ! Assurez-vous de consulter la liste complète pour stimuler votre imagination.

Quelles fonctionnalités Next.js vous offre

Vous trouverez ci-dessous une liste restreinte de ce que Next donne à vos projets React.

En bref, il fournit les fonctionnalités d'une suite complète de packages au sein d'une seule nextdépendance.

Next.js vous donne :

  • Routage basé sur les pages (créer une page en plaçant des composants dans /pages)
  • Un routeur intégré (pas besoin d'installer React Router)
  • Routes API (écrire du code backend en utilisant Node.js dans /pages/api)
  • Constructions super rapides pour le développement/la production (voir les modifications enregistrées instantanément)
  • Optimisation des images et des polices
  • Prise en charge ESLint et TypeScript intégrée
  • + des tonnes d'autres (tous décrits dans la documentation Next.js )

Quelles fonctionnalités Next.js n'a pas

De plus, il existe de nombreuses choses essentielles que Next.js ne fournit pas par défaut.

Par exemple, il n'existe aucun moyen intégré d'effectuer les opérations suivantes dans Next :

  • Authentification (je recommande d'utiliser le package Next-Auth)
  • Tests (je recommande d'utiliser Playwright ou Cypress pour vos tests E2E)
  • Gestion des états (je recommande Zustand ou Redux Toolkit)

La documentation elle-même couvre ces lacunes, mais il est important de noter que même si Next.js vous offre beaucoup, il ne couvrira pas à lui seul tous les cas d'utilisation de l'application .

Suivant.js Speedrun 💨

Je vais vous donner les points forts de Next.js pour vous donner une idée de la façon dont le framework vous offre d'excellentes valeurs par défaut qui vous rendent plus productif.

Comment créer une application Next.js

Si vous avez installé NPM, démarrez tout nouveau projet Next avec la commande :

npx create-next-app my-next-project

create-next-app est un package comme Create React App, mais pour les projets Next.js.

En bref, cela nous donne un projet Next avec toutes ses dépendances installées (qui sont next, reactet react-dom) plus quelques pages et styles factices.

Scripts Next.js

Vous trouvez actuellement quatre scripts principaux répertoriés dans votre package.jsonfichier :

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}
  • dev – exécute un serveur de développement sur localhost:3000
  • build – crée une application construite prête à être déployée
  • start- démarre votre application Next construite (doit être exécutée en next buildpremier)
  • lint – "peluchera" votre projet Next en utilisant la dépendance dev ESLint pour vous avertir si votre code écrit doit être corrigé

Pour exécuter votre projet Next en développement, assurez-vous d'être dans votre dossier de projet (my-next-project) et exécutez le script dev :

npm run dev

Une fois que votre projet est opérationnel sur localhost : 3000, accédez-y et vous devriez voir une application par défaut :

Page d'accueil du projet Create-Next-App

Ajouter TypeScript à Next.js

Vous voulez ajouter TypeScript ? Rien de plus simple :

# run 'touch' to create an empty config file
# Next will auto-populate it

touch tsconfig.json 

# then you'll be prompted to run the command:
npm install -D typescript @types/react @types/node

# now you can use TypeScript everywhere ✨

Pages et itinéraires

Vous souhaitez ajouter une page À propos de votre application ?

Déposez simplement votre composant dans /pages/about.js (.tsx si vous utilisez TypeScript) :

// No React import needed up here! 😳

export default function About() {
  return <div>About</div>
}

Et il fonctionne!

C'est un grand avantage car nous n'avons plus besoin d'installer une bibliothèque comme React Router qui nécessite un passe-partout tel qu'un composant Router et Route, entre autres.

Si vous souhaitez des pages dynamiques, qui se trouvent dans le même dossier mais qui ont des slugs différents (tels que des articles de blog), Next nous permet de rendre le même composant de page en enveloppant le nom du fichier entre parenthèses.

Par exemple, pour afficher les articles de blog en fonction d'un slug particulier, nous pourrions déposer un dossier "blog" dans les pages avec le nom de fichier : [slug].js :

import { useRouter } from 'next/router'

// if we navigate to localhost:3000/blog/123...
export default function BlogPost() {
  const router = useRouter()
  const { slug } = router.query

  return <p>Post: {slug}</p> // ...you'll see "Post: 123"
}

Next expose commodément un useRoutercrochet React pour faciliter l'accès aux informations sur l'emplacement ou l'historique de l'application.

Dans cet exemple, cela nous permet d'obtenir les paramètres de la requête (la valeur dynamique) à partir de router.query. Le nom de la propriété slugcorrespond au nom dynamique que nous avons donné à notre fichier : [slug].js.

Remarque : Vous pouvez avoir plusieurs paramètres de requête en raison de l'utilisation de dossiers imbriqués avec des noms dynamiques. Comme /blog/[sujet]/[slug].js. Depuis [slug].js, nous pouvons accéder à la fois aux paramètres de requête topicet .slug

Liens et navigation

Tout comme Next inclut les itinéraires et le routage, le framework nous donne également un Linkcomposant utile de next/link.

Cela peut sembler un peu inhabituel si vous venez de React Router, car cela nécessite de placer un lien de balise d'ancrage traditionnel en tant qu'enfant et de transmettre le href en tant qu'accessoire.

Si nous voulions créer un lien vers la page d'accueil (/) et un itinéraire de blog (c'est-à-dire /blog/123), nous inclurions les éléments suivants dans /pages/about.js :

import Link from "next/link";

export default function About() {
  return (
    <div>
      <h1>About Me</h1>
      
      <div>
        <Link href="/">
          <a>Home</a>
        </Link>
        <Link href="/blog/123">
          <a>My Blog Post</a>
        </Link>
      </div>
    </div>
  );
}

hrefest le seul accessoire requis pour le Linkcomposant et les données peuvent également lui être transmises en tant qu'objet :

import Link from "next/link";

export default function About() {
  return (
    <div>
      <h1>About Me</h1>

      <div>
        <Link href={{ pathname: "/about" }}>
          <a>Home</a>
        </Link>
        <Link
          href={{
            pathname: "/blog/[slug]",
            query: { slug: "123" },
          }}
        >
          <a>My Blog Post</a>
        </Link>
      </div>
    </div>
  );
}

Les changements d'itinéraire peuvent également être effectués à l'aide du useRouterhook, principalement en utilisant la .push()méthode pour pousser vers un itinéraire différent par programmation.

Voici un exemple factice d'une page de connexion où un utilisateur fournit son adresse e-mail pour se connecter et est poussé vers la route '/verify-email' par la suite.

export default function Login() {
  const router = useRouter()
    
  function onSubmit(event) {
    event.preventDefault();
    const email = event.target.elements.email.value;  
    await sendLoginEmail(email);    
    // push user to /verify-email page
    router.push('/verify-email');
  }
    
  return (
    <div>
      <h1>Log in here</h1>

      <form onSubmit={onSubmit}>
        <input name="email" placeholder="Your email address" />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

Référencement dans Next.js

Les pages des applications Web ont non seulement besoin de données dans le corps HTML, mais également de balises meta (head).

Dans une application Create React, cela nécessiterait l'installation d'une dépendance externe appelée React Helmet.

Dans Next, nous pouvons utiliser le Headcomposant from next/headpour ajouter facilement des métadonnées à nos pages Web à afficher dans les résultats de recherche et intégrer :

import Link from "next/link";
import Head from "next/head";

export default function About() {
  return (
    <div>
      <Head>
      	<title>About | My Cool Site</title>
        <meta name="description" content="You really need to read this website because it's made with Next.js" />
      </Head>
      
      <h1>About Me</h1>
      <div>
        <Link href="/">
          <a>Home</a>
        </Link>
        <Link href="/blog/123">
          <a>My Blog Post</a>
        </Link>
      </div>
    </div>
  );
}

Remarque : Le composant Head doit être inclus dans n'importe quel composant de page, généralement directement dans la balise d'ouverture. Vous pouvez créer un composant Head réutilisable qui accepte les valeurs dynamiques via des props.

Itinéraires d'API

Besoin d'un backend / API pour votre projet ? Aucun problème.

L'un des éléments qui changent la donne à propos de Next est de savoir comment il fournit une solution tout-en-un pour créer des applications React complètes en vous donnant la possibilité d'écrire du code serveur à l'aide d'une fonctionnalité appelée API routes .

Pour écrire votre backend, ajoutez un dossier appelé "api" dans /pages pour créer votre propre API qui sera finalement exécutée en tant que fonctions sans serveur distinctes.

Si nous voulions récupérer des données pour notre page à propos de /api/about, nous inclurions une page appelée about.js dans /pages/api :

// syntax is very similar to the "Express" Node.js framework

// here we are responding to every request with an OK (200) code and sending JSON data back (our name)

export default function handler(req, res) {
  res.status(200).json({ name: "Reed Barger" });
}

Demander des données côté client

Maintenant que nous avons une route API, comment l'utilisons-nous ?

Comment demandons-nous des données à nos routes API et utilisons-nous les données dans nos pages client ?

L'approche traditionnelle serait de le demander en utilisant useEffectet useState:

import Link from "next/link";
import { useEffect, useState } from "react";

export default function About() {
  const [data, setData] = useState(null);
  const [isLoading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    fetch("api/about")
      .then((res) => res.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, []);

  if (isLoading) return <p>Loading...</p>;
  if (!data) return <p>No about data</p>;

  return (
    <div>
      <h1>My name is: {data.name}</h1>
    </div>
  );
}

Cette approche fonctionne, mais nécessite beaucoup de code passe-partout. En plus de cela, il n'a pas la meilleure expérience utilisateur.

Bien qu'il s'agisse d'un exemple de base, si nous avions les informations dynamiques nécessaires à récupérer et à afficher dans nos pages, nous afficherions toujours le texte "Chargement" à nos utilisateurs à chaque visite de page.

Une meilleure façon de récupérer des données et de les attraper lors d'une prochaine visite consiste à utiliser la bibliothèque SWR, qui est également créée par les développeurs de Next.

Cela nous donne un crochet pratique useSWRpour récupérer plus facilement les données et gérer le chargement et l'état des erreurs, ainsi que les données de cache pour les visites futures si rien n'a changé. S'il a changé, récupérez les données en arrière-plan pendant que les données obsolètes sont affichées à partir du cache.

Remarque : Le hook est nommé d'après cette stratégie "d'invalidation du cache" : "stale-while-revalidate"

Voici la même requête faite à l'aide de SWR :

import useSWR from "swr";

const fetcher = (...args) => fetch(...args).then((res) => res.json())

export default function About() {
  const { data, error } = useSWR("/api/about", fetcher)

  if (error) return <div>Error fetching data</div>
  if (!data) return <div>Loading...</div>

  return (
    <div>
      <h1>{data.name}</h1>
    </div>
  )
}

Demander des données côté serveur

Quel est un moyen encore meilleur de récupérer des données dans Next qui améliore l'expérience utilisateur et le référencement en général ?

Il existe deux fonctions que vous pouvez inclure directement dans vos fichiers de page et qui nous permettent de récupérer des données sur le serveur :

Oui, ces fonctions se trouvent dans le même fichier que nos composants React, mais leur code est fourni séparément de notre client React.

  1. getServerSideProps
  2. getStaticProps

GetServerSideProps

getServerSidePropss'exécute à chaque visite de page. Par conséquent, il est très utile sur les pages contenant des données dynamiques ou nécessitant des requêtes à chaque fois, telles que l'obtention de données utilisateur authentifiées.

export default function About({ name }) {
  return (
    <div>
      <h1>My name is: {name}</h1>
    </div>
  );
}

export function getServerSideProps() {
  return {
    props: { name: "Reed Barger" },
  };
}

La fonction fait exactement ce que son nom indique - elle nous permet d'envoyer des données depuis le serveur et de les injecter dans les accessoires de notre composant de page.

Ce qui est génial avec cette fonctionnalité, c'est qu'elle permet à notre client React d'afficher les données immédiatement, sans délai, sans avoir à gérer de chargement ou d'état d'erreur.

Si nous voulions récupérer des données sur le serveur, nous pourrions le faire en rendant getServerSidePropsasync en utilisant le mot- asyncclé.

export default function About({ name }) {
  return (
    <div>
      <h1>My name is: {name}</h1>
    </div>
  );
}

export async function getServerSideProps() {
  const data = await fetch("https://randomuser.me/api").then((res) =>
    res.json()
  );

  return {
    props: { name: data.results[0].name.first },
  };
}

Ici, nous récupérons dynamiquement les données de l' api utilisateur aléatoire , et nos données changent chaque fois que nous actualisons la page.

GetStaticProps

Renommez notre getServerSidePropsfonction avec le nom getStaticProps.

Encore une fois, la fonction fait ce que son nom indique. Ou le fait-il?

getStaticPropsest une fonction plus appropriée pour les pages plus statiques qui changent moins fréquemment. Cette fonction exécute notre code serveur et fait une requête GET sur le serveur, mais elle ne le fait qu'une seule fois lorsque notre projet est construit.

Cependant, lorsque vous exécutez l'application en cours de développement, il semble qu'elle demande des données chaque fois que nous actualisons la page, comme getServerSideProps.

Il est important de noter que getStaticProps ne fait des requêtes qu'à chaque visite de page pendant le développement .

Si vous exécutez yarn buildpuis exécutez la version de production ou votre projet React à l'aide yarn startde , vous verrez que peu importe le nombre de fois que nous actualisons, nous obtenons toujours le même nom - le nom qui a été demandé lors de la construction du projet et non au moment de l'exécution.

Exemple de résultat demandé à getStaticProps

Vous vous demandez peut-être à ce stade : "Pourquoi utiliser des routes d'API avec ces deux fonctions ?"

Il est important d'être conscient du fait que getServerSidePropset getStaticPropsne peuvent exécuter que des requêtes GET. Les routes d'API peuvent gérer tout type de demande de lecture et de mise à jour de données (c'est-à-dire lorsqu'elles sont combinées avec une couche de données comme une base de données)

Où apprendre ensuite.js

Ce que nous avons couvert ici ne fait qu'effleurer la surface de Next, mais vous avez déjà acquis tout ce dont vous avez besoin pour commencer à utiliser Next dans vos projets React aujourd'hui.

Si vous souhaitez un guide plus approfondi et technique, le site officiel propose un cours interactif sur la façon d'apprendre Next.js à partir de zéro.

Le cours (gratuit) Next.js Learn

Et si vous êtes prêt à passer à l'étape "Suivante" et que vous souhaitez créer des applications React à grande échelle à partir de zéro, consultez The React Bootcamp .

Puisque vous êtes sérieux au sujet de l'apprentissage de React, j'ai rassemblé une ressource complète et ultime pour faire de vous un pro de React, prêt à :

  • Créez des applications étonnantes et prêtes pour la production, du début au déploiement
  • Comprendre Réagir en profondeur , des concepts de base aux dernières fonctionnalités
  • Devenez un développeur en demande qui commande un salaire à 6 chiffres

Link: https://www.freecodecamp.org/news/nextjs-tutorial/

#next #nextjs #react 

Premiers Pas Avec Next.js - Une Bibliothèque React De Projet Requise
津田  直子

津田 直子

1642483320

Next.jsで複数のレイアウトを使用する

Next.jsアプリケーションに複数のレイアウトを組み込むための最良の方法は何でしょうか?

レイアウトを定義する

ページに応じて、 2つのレイアウトとLayout1Layout2レンダリングしたいとします。

Layout1 このように見えるかもしれません。

// layouts/Layout1.jsx
const Layout1 = ({ children }) => {
  return <div className="layout1">{children}</div>;
};
export default Layout1;

そしてLayout2、大幅に異なるレイアウトです。

// layouts/Layout2.jsx
const Layout2 = ({ children }) => {
  return <div className="layout2">{children}</div>;
};
export default Layout2;

使用例

ルートに基づいてレイアウトを変更することを検討しましたが(つまり、すべてpages/layout1/*使用Layout1)、レンダリングパフォーマンスが最適ではありませんでした。

レイアウトを変更する最も簡単な方法は、ページレベルで定義することです。

// pages/home.jsx
const Home = () => <div>Home</div>;
Home.layout = "L1";
export default Home;
// pages/about.jsx
const About = () => <div>About</div>;
About.layout = "L2";
export default About;

次に、の内部_app.jsxで、必要なすべてのインポートを処理できます。

// pages/_app.jsx
import Layout1 from "@/layouts/Layout1";
import Layout2 from "@/layouts/Layout2";
const layouts = {
  L1: Layout1,
  L2: Layout2,
};
const App = ({ Component, pageProps }) => {
  const Layout = layouts[Component.layout] || ((children) => <>{children}</>);
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
};
export default App;

ネストされたレイアウト

ネストされたレイアウトが必要ない場合、提供されているソリューションは非常にうまく機能します。

複数のネストされたレイアウトが必要な場合は、ページに必要なレイアウトを識別する文字列を返す代わりに、期待されるレイアウトの関数を返すことができます。

// pages/home.jsx
import Layout1 from "@/layouts/Layout1";
import Layout2 from "@/layouts/Layout2";
Home.layout = (page) => (
  <Layout1>
    <Layout2>{page}</Layout2>
  </Layout1>
);
// pages/about.jsx
import Layout2 from "@/layouts/Layout2";
import Layout1 from "@/layouts/Layout1";
About.layout = (page) => (
  <Layout2>
    <Layout1>{page}</Layout1>
  </Layout2>
);

内部_app.jsxでは、コンポーネントのレンダリング方法を変更できます。

// pages/_app.jsx
const pageLayout = Component.layout || ((page) => page);
return pageLayout(<Component {...pageProps} />); 

リンク:https ://simplernerd.com/nextjs-multiple-layouts/

#nextjs 

Next.jsで複数のレイアウトを使用する

Comience A Usar Next.js Lo Más Fácilmente Posible

He compuesto esta guía para brindarle una descripción general práctica de quizás la biblioteca React más importante que usará para compilar el 90 % de sus proyectos: Next.js.

El objetivo de este tutorial es que comience a usar Next.js lo más fácilmente posible.

Esta no es una guía completa sobre Next, pero le dará todo lo que necesita entender:

  • Qué es Next.js (y por qué debería comenzar a usarlo para sus proyectos React)
  • Cómo realizar tareas esenciales usando Next.js
  • Además, cómo Next.js lo ayudará a crear mejores aplicaciones React en general, más rápido

¡Vamos a sumergirnos!

¿Qué es Next.js?

La herramienta definitiva para que cualquier desarrollador de React aprenda y mejore sus propios proyectos es, sin duda , Next.js.

La página de inicio de NextJS.org

Ya sea que esté creando un sitio estático con interactividad como un blog, o un proyecto de pila completa altamente dinámico como una aplicación de redes sociales, casi siempre busco Next .

La primera razón para usar Next es, como dice el título del banner, porque es un marco React .

Piense en ello como una forma de "baterías incluidas" para crear sus aplicaciones React, lo que le brinda la simplicidad de herramientas como Create React App, combinada con un conjunto de otras funciones súper poderosas.

A pesar de ser un marco, Next.js mantiene parte de la filosofía React de no tener opiniones. Next le brinda funciones para mejorar su experiencia de desarrollo general, pero no restringe la cantidad de opciones entre las que puede elegir.

De hecho, dado lo que Next hace posible para las aplicaciones React, diría que realmente ha ampliado la cantidad de opciones disponibles para usted, si las necesita.

Puede obtener una idea más completa de todo lo que las aplicaciones de Next.js son capaces de hacer consultando cientos de proyectos de ejemplo de Next.js en nextjs.org/examples :

Ejemplos de Next.js

Allí puede encontrar ejemplos sobre cómo crear las siguientes aplicaciones Next (React):

  • Un blog usando Markdown / MDX o Wordpress
  • Una aplicación de comercio electrónico usando Shopify
  • Un sitio que utiliza sistemas de administración de contenido como Contentful o Sanity
  • Un proyecto completo con GraphQL y autenticación

¡Y toneladas más! Asegúrese de consultar la lista completa para despertar su imaginación.

Qué características le ofrece Next.js

A continuación se muestra una breve lista de lo que Next ofrece a sus proyectos de React.

En resumen, proporciona la funcionalidad de un conjunto completo de paquetes dentro de una sola nextdependencia.

Next.js te da:

  • Enrutamiento basado en páginas (cree una página colocando componentes en /pages)
  • Un enrutador incorporado (no es necesario instalar React Router)
  • Rutas API (escriba el código de back-end usando Node.js en /pages/api)
  • Compilaciones súper rápidas para desarrollo/producción (vea los cambios guardados al instante)
  • Optimización de imágenes y fuentes
  • Compatibilidad con ESLint y TypeScript integrada
  • + toneladas más (todo descrito en la documentación de Next.js )

Qué características no tiene Next.js

Además, hay muchas cosas esenciales que Next.js no proporciona de forma inmediata.

Por ejemplo, no hay una forma integrada de hacer lo siguiente en Siguiente:

  • Autenticación (recomiendo usar el paquete Next-Auth)
  • Pruebas (recomiendo usar Playwright o Cypress para sus pruebas E2E)
  • Gestión de estados (recomiendo Zustand o Redux Toolkit)

La documentación en sí misma cubre estas deficiencias, pero es importante tener en cuenta que si bien Next.js le brinda una gran oferta , no cubrirá por sí solo todos los casos de uso de la aplicación .

Next.js Speedrun 💨

Le daré los aspectos más destacados de Next.js para darle una idea de cómo el marco le brinda excelentes valores predeterminados que lo hacen más productivo.

Cómo crear una aplicación Next.js

Si tiene instalado NPM, inicie cualquier nuevo proyecto Next con el comando:

npx create-next-app my-next-project

create-next-app es un paquete como Create React App, pero para proyectos Next.js.

En resumen, nos brinda un proyecto Next con todas sus dependencias instaladas (que son next, reacty react-dom) además de algunas páginas y estilos ficticios.

Secuencias de comandos de Next.js

Actualmente encuentra cuatro scripts principales enumerados en su package.jsonarchivo:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}
  • dev – ejecuta un servidor de desarrollo en localhost:3000
  • build – crea una aplicación construida lista para su implementación
  • start– inicia su aplicación Next construida (debe ejecutarse next buildprimero)
  • lint – "lint" su próximo proyecto usando la dependencia de desarrollo ESLint para advertirle si su código escrito necesita ser reparado

Para ejecutar su próximo proyecto en desarrollo, asegúrese de estar en la carpeta de su proyecto (my-next-project) y ejecute el script de desarrollo:

npm run dev

Una vez que su proyecto esté en funcionamiento en localhost:3000, navegue hasta allí y debería ver una aplicación predeterminada:

Página de índice del proyecto Create-Next-App

Agregue TypeScript a Next.js

¿Quieres agregar TypeScript? No podría ser más fácil:

# run 'touch' to create an empty config file
# Next will auto-populate it

touch tsconfig.json 

# then you'll be prompted to run the command:
npm install -D typescript @types/react @types/node

# now you can use TypeScript everywhere ✨

Paginas y Rutas

¿Quieres agregar una página Acerca de a tu aplicación?

Simplemente suelte su componente en /pages/about.js (.tsx si está usando TypeScript):

// No React import needed up here! 😳

export default function About() {
  return <div>About</div>
}

¡Y funciona!

Esta es una gran ventaja porque ya no tenemos que instalar una biblioteca como React Router que requiere repeticiones como un componente Router y Route, entre otros.

Si desea páginas dinámicas, que están en la misma carpeta pero tienen diferentes slugs (como publicaciones de blog), Next nos permite representar el mismo componente de página colocando el nombre del archivo entre corchetes.

Por ejemplo, para mostrar publicaciones de blog según un slug en particular, podríamos colocar una carpeta "blog" en páginas con el nombre de archivo: [slug].js:

import { useRouter } from 'next/router'

// if we navigate to localhost:3000/blog/123...
export default function BlogPost() {
  const router = useRouter()
  const { slug } = router.query

  return <p>Post: {slug}</p> // ...you'll see "Post: 123"
}

A continuación, expone convenientemente un enlace de useRouterReact para facilitar el acceso a la información sobre la ubicación o el historial de la aplicación.

En este ejemplo, nos permite obtener los parámetros de consulta (el valor dinámico) de router.query. El nombre de la propiedad slugcoincide con el nombre dinámico que le dimos a nuestro archivo: [slug].js.

Nota: Puede tener varios parámetros de consulta debido al uso de carpetas anidadas con nombres dinámicos. Como /blog/[tema]/[slug].js. Desde dentro de [slug].js, podríamos acceder a los parámetros de consulta topicy .slug

Enlaces y navegación

Así como Next incluye rutas y enrutamiento, el marco también nos brinda un Linkcomponente útil de next/link.

Puede parecer un poco inusual si proviene de React Router, porque requiere colocar un enlace de etiqueta de anclaje tradicional como elemento secundario y pasar el href como accesorio.

Si quisiéramos vincular a la página de inicio (/) y una ruta de blog (es decir, /blog/123), incluiríamos lo siguiente en /pages/about.js:

import Link from "next/link";

export default function About() {
  return (
    <div>
      <h1>About Me</h1>
      
      <div>
        <Link href="/">
          <a>Home</a>
        </Link>
        <Link href="/blog/123">
          <a>My Blog Post</a>
        </Link>
      </div>
    </div>
  );
}

hrefes el único accesorio requerido para el Linkcomponente y los datos también se pueden pasar a él como un objeto:

import Link from "next/link";

export default function About() {
  return (
    <div>
      <h1>About Me</h1>

      <div>
        <Link href={{ pathname: "/about" }}>
          <a>Home</a>
        </Link>
        <Link
          href={{
            pathname: "/blog/[slug]",
            query: { slug: "123" },
          }}
        >
          <a>My Blog Post</a>
        </Link>
      </div>
    </div>
  );
}

Los cambios de ruta también se pueden hacer usando el useRouterenlace, principalmente usando el .push()método para empujar a una ruta diferente mediante programación.

Aquí hay un ejemplo ficticio de una página de inicio de sesión donde un usuario proporciona su correo electrónico para iniciar sesión y luego se lo empuja a la ruta '/ verificar-correo electrónico'.

export default function Login() {
  const router = useRouter()
    
  function onSubmit(event) {
    event.preventDefault();
    const email = event.target.elements.email.value;  
    await sendLoginEmail(email);    
    // push user to /verify-email page
    router.push('/verify-email');
  }
    
  return (
    <div>
      <h1>Log in here</h1>

      <form onSubmit={onSubmit}>
        <input name="email" placeholder="Your email address" />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

SEO en Next.js

Las páginas en las aplicaciones web no solo necesitan datos dentro del cuerpo HTML, sino también etiquetas meta (encabezado).

En una aplicación Create React, esto requeriría instalar una dependencia externa llamada React Helmet.

En Siguiente, podemos usar el Headcomponente de next/headpara agregar convenientemente metadatos a nuestras páginas web para que se muestren en los resultados de búsqueda e incrustaciones:

import Link from "next/link";
import Head from "next/head";

export default function About() {
  return (
    <div>
      <Head>
      	<title>About | My Cool Site</title>
        <meta name="description" content="You really need to read this website because it's made with Next.js" />
      </Head>
      
      <h1>About Me</h1>
      <div>
        <Link href="/">
          <a>Home</a>
        </Link>
        <Link href="/blog/123">
          <a>My Blog Post</a>
        </Link>
      </div>
    </div>
  );
}

Nota: El componente Head debe incluirse dentro de cualquier componente de la página, generalmente dentro de la etiqueta de apertura. Puede crear un componente Head reutilizable que acepte valores dinámicos a través de accesorios.

Rutas API

¿Necesitas un backend/API para tu proyecto? No hay problema.

Uno de los cambios de juego sobre Next es cómo proporciona una solución todo en uno para crear aplicaciones React de pila completa al brindarle la capacidad de escribir código de servidor utilizando una función llamada rutas API .

Para escribir su backend, agregue una carpeta llamada "api" en /pages para crear su propia API que finalmente se ejecuta como funciones independientes sin servidor.

Si quisiéramos obtener datos para nuestra página acerca de /api/about, incluiríamos una página llamada about.js en /pages/api:

// syntax is very similar to the "Express" Node.js framework

// here we are responding to every request with an OK (200) code and sending JSON data back (our name)

export default function handler(req, res) {
  res.status(200).json({ name: "Reed Barger" });
}

Solicitar datos del lado del cliente

Ahora que tenemos una ruta API, ¿cómo la usamos?

¿Cómo solicitamos datos de nuestras rutas API y usamos los datos en nuestras páginas de clientes?

El enfoque tradicional sería solicitarlo usando useEffecty useState:

import Link from "next/link";
import { useEffect, useState } from "react";

export default function About() {
  const [data, setData] = useState(null);
  const [isLoading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    fetch("api/about")
      .then((res) => res.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, []);

  if (isLoading) return <p>Loading...</p>;
  if (!data) return <p>No about data</p>;

  return (
    <div>
      <h1>My name is: {data.name}</h1>
    </div>
  );
}

Este enfoque funciona, pero requiere una gran cantidad de código repetitivo. Además de eso, no tiene la mejor experiencia de usuario.

Si bien este es un ejemplo básico, si tuviéramos la información dinámica necesaria para obtener y mostrar en nuestras páginas, siempre mostraríamos el texto "Cargando" a nuestros usuarios en cada visita a la página.

Una forma mejorada de obtener datos y capturarlos en futuras visitas es usar la biblioteca SWR, que también está hecha por los desarrolladores de Next.

Nos brinda un gancho conveniente useSWRpara obtener datos más fácilmente y manejar la carga y el estado de los errores, así como los datos de caché para futuras visitas si nada ha cambiado. Si ha cambiado, obtenga los datos en segundo plano mientras los datos obsoletos se muestran desde el caché.

Nota: el enlace lleva el nombre de esta estrategia de "invalidación de caché": "obsoleto mientras se revalida"

Aquí está la misma solicitud hecha usando SWR:

import useSWR from "swr";

const fetcher = (...args) => fetch(...args).then((res) => res.json())

export default function About() {
  const { data, error } = useSWR("/api/about", fetcher)

  if (error) return <div>Error fetching data</div>
  if (!data) return <div>Loading...</div>

  return (
    <div>
      <h1>{data.name}</h1>
    </div>
  )
}

Solicitar datos del lado del servidor

¿Cuál es una forma aún mejor de obtener datos en Next que mejore la experiencia del usuario y el SEO en general?

Hay dos funciones que puede incluir directamente dentro de los archivos de su página que nos permiten obtener datos del servidor:

Sí, estas funciones están en el mismo archivo que nuestros componentes React, pero el código para ellas se incluye por separado de nuestro cliente React.

  1. getServerSideProps
  2. getStaticProps

ObtenerServerSideProps

getServerSidePropsse ejecuta en cada visita a la página. Como resultado, es muy útil en páginas con datos dinámicos o necesita que se realicen solicitudes cada vez, como obtener datos de usuarios autenticados.

export default function About({ name }) {
  return (
    <div>
      <h1>My name is: {name}</h1>
    </div>
  );
}

export function getServerSideProps() {
  return {
    props: { name: "Reed Barger" },
  };
}

La función hace exactamente lo que su nombre indica: nos permite enviar datos desde el servidor y los inyecta en los accesorios de nuestro componente de página.

Lo bueno de esta función es que permite que nuestro cliente React muestre los datos de inmediato, sin demora, además de no tener que manejar ningún estado de carga o error.

Si quisiéramos obtener datos del servidor, podríamos hacerlo haciendo getServerSidePropsasync usando la asyncpalabra clave.

export default function About({ name }) {
  return (
    <div>
      <h1>My name is: {name}</h1>
    </div>
  );
}

export async function getServerSideProps() {
  const data = await fetch("https://randomuser.me/api").then((res) =>
    res.json()
  );

  return {
    props: { name: data.results[0].name.first },
  };
}

Aquí estamos obteniendo datos dinámicamente de la API de usuario aleatorio , y nuestros datos cambian cada vez que actualizamos la página.

ObtenerAccesoriosEstáticos

Cambiemos el nombre de nuestra getServerSidePropsfunción con el nombre getStaticProps.

De nuevo, la función hace lo que dice su nombre. ¿O sí?

getStaticPropses una función que es más apropiada para páginas más estáticas que cambian con menos frecuencia. Esta función ejecuta nuestro código de servidor y realiza una solicitud GET en el servidor, pero solo lo hace una vez cuando se construye nuestro proyecto.

Sin embargo, cuando ejecuta la aplicación en desarrollo, parece solicitar datos cada vez que actualizamos la página como getServerSideProps.

Es importante tener en cuenta que getStaticProps solo realiza solicitudes en cada visita a la página durante el desarrollo .

Si ejecuta yarn buildy luego ejecuta la compilación de producción o su proyecto React usando yarn start, verá que no importa cuántas veces actualicemos, seguimos obteniendo el mismo nombre: el nombre que se solicitó cuando se creó el proyecto y no en tiempo de ejecución.

Resultado de muestra solicitado de getStaticProps

Es posible que se pregunte en este punto: "¿Por qué usar rutas API con estas dos funciones?"

Es importante tener en cuenta el hecho de que ambos getServerSidePropsy getStaticPropssolo pueden realizar solicitudes GET. Las rutas API pueden manejar cualquier tipo de solicitud para leer y actualizar datos (es decir, cuando se combinan con una capa de datos como una base de datos)

Dónde aprender Next.js

Lo que hemos cubierto aquí solo rasca la superficie de Next, pero ya obtuvo todo lo que necesita para comenzar a usar Next en sus proyectos de React hoy.

Si desea una guía más detallada y técnica, el sitio oficial tiene un curso interactivo sobre cómo aprender Next.js desde cero.

El curso de aprendizaje (gratuito) de Next.js

Y si está listo para dar el paso "Siguiente" y desea crear aplicaciones React a gran escala desde cero, consulte The React Bootcamp .

Como te tomas en serio el aprendizaje de React, he creado un recurso completo y definitivo para convertirte en un profesional de React, listo para:

  • Cree increíbles aplicaciones listas para producción desde el principio hasta la implementación
  • Comprenda React profundamente desde los conceptos básicos hasta las últimas características
  • Conviértase en un desarrollador solicitado que cobra un salario de 6 cifras 

Enlace: https://www.freecodecamp.org/news/nextjs-tutorial/

#nextjs  #reactjs 

Comience A Usar Next.js Lo Más Fácilmente Posible
宇野  和也

宇野 和也

1642375380

Next.jsをできるだけ簡単に使い始めましょう

このガイドは、プロジェクトの90%を構築するために使用するおそらく最も重要なReactライブラリであるNext.jsの実用的な概要を示すために作成されました。

このチュートリアルの目的は、Next.jsをできるだけ簡単に使い始めることです。

これはNextの完全なガイドではありませんが、理解する必要のあるすべてのものを提供します。

  • Next.jsとは何ですか(そしてReactプロジェクトでそれを使い始めるべき理由)
  • Next.jsを使用して重要なタスクを実行する方法
  • さらに、Next.jsが全体的に優れたReactアプリケーションをより速く構築するのにどのように役立つか

飛び込みましょう!

Next.jsとは何ですか?

React開発者が自分のプロジェクトを学び、改善するための究極のツールは、間違いなくNext.jsです。

NextJS.orgホームページ

ブログのように双方向性のある静的サイトを構築している場合でも、ソーシャルメディアアプリのように非常に動的なフルスタックプロジェクトを構築している場合でも、ほとんどの場合、Nextにアクセスします。

Nextを使用する最初の理由は、バナーの見出しにあるように、Reactフレームワークだからです。

これは、Reactアプリケーションを構築するための「バッテリーを含む」方法と考えてください。これにより、Create React Appなどのツールがシンプルになり、他の一連の非常に強力な機能と組み合わされます。

フレームワークであるにもかかわらず、Next.jsは、非ピニオン化されるというReactの哲学の一部を維持しています。Nextは、全体的な開発エクスペリエンスを向上させる機能を提供しますが、選択できるオプションの量を制限するものではありません。

実際、NextがReactアプリで可能にすることを考えると、必要に応じて、利用できるオプションの数が実際に増えたと私は主張します。

nextjs.org/examplesで数百のサンプルNext.jsプロジェクトをチェックすることで、Next.jsアプリが実行できるすべてのことをより完全に理解できます

Next.jsの例

そこには、次のNext(React)アプリを作成する方法の例があります。

  • Markdown / MDXまたはWordpressを使用したブログ
  • Shopifyを使用したeコマースアプリ
  • ContentfulやSanityなどのコンテンツ管理システムを使用しているサイト
  • GraphQLと認証を使用したフルスタックプロジェクト

そしてもっとたくさん!あなたの想像力を刺激するために完全なリストをチェックしてください。

Next.jsが提供する機能

以下は、NextがReactプロジェクトに提供するものの候補リストです。

つまり、単一のnext依存関係内でパッケージスイート全体の機能を提供します。

Next.jsはあなたに与えます:

  • ページベースのルーティング(/ pagesにコンポーネントを配置してページを作成します)
  • 内蔵ルーター(Reactルーターをインストールする必要はありません)
  • APIルート(/ pages / apiのNode.jsを使用してバックエンドコードを記述します)
  • 開発/本番用の超高速ビルド(保存された変更を即座に参照)
  • 画像とフォントの最適化
  • 組み込みのESLintおよびTypeScriptのサポート
  • +トン以上(すべてNext.jsドキュメントに概説されています)

Next.jsにない機能

さらに、Next.jsがそのままでは提供しない重要なものがたくさんあります。

たとえば、Nextで次のことを行う組み込みの方法はありません。

  • 認証(パッケージNext-Authの使用をお勧めします)
  • テスト(E2EテストにはPlaywrightまたはCypressを使用することをお勧めします)
  • 状態管理(ZustandまたはRedux Toolkitをお勧めします)

ドキュメント自体がこれらの欠点をカバーしていますが、Next.jsは多くのことを提供しますが、それだけですべてのアプリのユースケースをカバーするわけではないことに注意することが重要です。

Next.jsSpeedrun💨

Next.jsのハイライトを紹介し、フレームワークが生産性を高める優れたデフォルトをどのように提供するかを理解できるようにします。

Next.jsアプリを作成する方法

NPMがインストールされている場合は、次のコマンドを使用して新しいNextプロジェクトを開始します。

npx create-next-app my-next-project

create-next-app Create React Appのようなパッケージですが、Next.jsプロジェクト用です。

つまり、すべての依存関係(、、、および)に加えて、いくつかのダミーページとスタイルがインストールされたNextプロジェクトが提供さnextreactますreact-dom

Next.jsスクリプト

現在、ファイルには4つの主要なスクリプトがリストされていpackage.jsonます。

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}
  • dev – localhost:3000で開発サーバーを実行します
  • build –展開の準備ができたビルドアプリケーションを作成します
  • start–ビルドしたNextアプリケーションを起動します(next build最初に実行する必要があります)
  • lint – dev依存関係ESLintを使用して次のプロジェクトを「リント」し、記述したコードを修正する必要がある場合に警告します

開発中のNextプロジェクトを実行するには、プロジェクトフォルダー(my-next-project)にいることを確認し、devスクリプトを実行します。

npm run dev

プロジェクトがlocalhost:3000で起動して実行されたら、そこに移動すると、デフォルトのアプリが表示されます。

Create-Next-Appプロジェクトのインデックスページ

TypeScriptをNext.jsに追加します

TypeScriptを追加したいですか?簡単なことはありません:

# run 'touch' to create an empty config file
# Next will auto-populate it

touch tsconfig.json 

# then you'll be prompted to run the command:
npm install -D typescript @types/react @types/node

# now you can use TypeScript everywhere ✨

ページとルート

アプリにAboutページを追加したいですか?

コンポーネントを/pages/about.js(TypeScriptを使用している場合は.tsx)にドロップするだけです。

// No React import needed up here! 😳

export default function About() {
  return <div>About</div>
}

そしてそれは動作します!

ルーターやルートコンポーネントなどの定型文を必要とするReactRouterのようなライブラリをインストールする必要がなくなるため、これは大きな利点です。

同じフォルダーにあるがスラッグが異なる動的ページ(ブログ投稿など)が必要な場合は、Nextを使用すると、ファイル名を括弧で囲んで同じページコンポーネントをレンダリングできます。

たとえば、特定のスラッグに従ってブログ投稿を表示するには、ファイル名が[slug] .js:のページに「blog」フォルダーをドロップします。

import { useRouter } from 'next/router'

// if we navigate to localhost:3000/blog/123...
export default function BlogPost() {
  const router = useRouter()
  const { slug } = router.query

  return <p>Post: {slug}</p> // ...you'll see "Post: 123"
}

次に、useRouterReactフックを便利に公開して、アプリの場所や履歴に関する情報に簡単にアクセスできるようにします。

この例では、からクエリパラメータ(動的な値)を取得できますrouter.query。プロパティ名slugは、ファイルに付けた動的な名前と一致します[slug].js

注:動的な名前を持つネストされたフォルダーを使用するため、複数のクエリパラメーターを持つことができます。/blog/[topic]/[slug].jsなど。[slug] .js内から、topicslugクエリパラメータの両方にアクセスできます。

リンクとナビゲーション

Nextにルートとルーティングが含まれているように、フレームワークはLinkからの便利なコンポーネントも提供しますnext/link

React Routerから来ている場合は、従来のアンカータグリンクを子として配置し、hrefを小道具として渡す必要があるため、少し変わったように見える場合があります。

ホームページ(/)とブログルート(つまり/ blog / 123)にリンクしたい場合は、/ pages /about.jsに以下を含めます。

import Link from "next/link";

export default function About() {
  return (
    <div>
      <h1>About Me</h1>
      
      <div>
        <Link href="/">
          <a>Home</a>
        </Link>
        <Link href="/blog/123">
          <a>My Blog Post</a>
        </Link>
      </div>
    </div>
  );
}

hrefコンポーネントに必要な唯一の小道具でありLink、データをオブジェクトとして渡すこともできます。

import Link from "next/link";

export default function About() {
  return (
    <div>
      <h1>About Me</h1>

      <div>
        <Link href={{ pathname: "/about" }}>
          <a>Home</a>
        </Link>
        <Link
          href={{
            pathname: "/blog/[slug]",
            query: { slug: "123" },
          }}
        >
          <a>My Blog Post</a>
        </Link>
      </div>
    </div>
  );
}

ルートの変更は、useRouterフックを使用して、主に.push()プログラムで別のルートにプッシュする方法を使用して行うこともできます。

これは、ユーザーがログインするための電子メールを提供し、その後「/ verify-email」ルートにプッシュされるログインページのダミーの例です。

export default function Login() {
  const router = useRouter()
    
  function onSubmit(event) {
    event.preventDefault();
    const email = event.target.elements.email.value;  
    await sendLoginEmail(email);    
    // push user to /verify-email page
    router.push('/verify-email');
  }
    
  return (
    <div>
      <h1>Log in here</h1>

      <form onSubmit={onSubmit}>
        <input name="email" placeholder="Your email address" />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

Next.jsのSEO

Webアプリケーションのページには、HTML本文内のデータだけでなく、メタ(ヘッド)タグも必要です。

Create Reactアプリケーションでは、これにはReactHelmetと呼ばれる外部依存関係をインストールする必要があります。

Head次に、からのコンポーネントを使用してnext/head、検索結果と埋め込みに表示されるメタデータをWebページに便利に追加できます。

import Link from "next/link";
import Head from "next/head";

export default function About() {
  return (
    <div>
      <Head>
      	<title>About | My Cool Site</title>
        <meta name="description" content="You really need to read this website because it's made with Next.js" />
      </Head>
      
      <h1>About Me</h1>
      <div>
        <Link href="/">
          <a>Home</a>
        </Link>
        <Link href="/blog/123">
          <a>My Blog Post</a>
        </Link>
      </div>
    </div>
  );
}

注:Headコンポーネントは、ページコンポーネント内、通常は開始タグ内に含める必要があります。小道具を介して動的な値を受け入れる再利用可能なヘッドコンポーネントを作成できます。

APIルート

プロジェクトにバックエンド/ APIが必要ですか?問題ない。

Nextのゲームチェンジャーの1つは、 APIルートと呼ばれる機能を使用してサーバーコードを記述できるようにすることで、フルスタックのReactアプリを作成するためのオールインワンソリューションを提供する方法です。

バックエンドを作成するには、/ pagesに「api」というフォルダーを追加して、最終的に個別のサーバーレス関数として実行される独自のAPIを作成します。

/ api / aboutからaboutページのデータを取得する場合は、about.jsというページを/ pages / apiに含めます。

// syntax is very similar to the "Express" Node.js framework

// here we are responding to every request with an OK (200) code and sending JSON data back (our name)

export default function handler(req, res) {
  res.status(200).json({ name: "Reed Barger" });
}

クライアント側のデータをリクエストする

APIルートができたので、どのように使用しますか?

APIルートからデータをリクエストし、クライアントページでデータを使用するにはどうすればよいですか?

useEffect従来のアプローチは、とを使用してリクエストすることuseStateです。

import Link from "next/link";
import { useEffect, useState } from "react";

export default function About() {
  const [data, setData] = useState(null);
  const [isLoading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    fetch("api/about")
      .then((res) => res.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, []);

  if (isLoading) return <p>Loading...</p>;
  if (!data) return <p>No about data</p>;

  return (
    <div>
      <h1>My name is: {data.name}</h1>
    </div>
  );
}

このアプローチは機能しますが、多くの定型コードが必要です。その上、最高のユーザーエクスペリエンスを提供していません。

これは基本的な例ですが、ページにフェッチして表示するために必要な動的情報がある場合は、ページにアクセスするたびに常に「読み込み中」のテキストがユーザーに表示されます。

データをフェッチして将来の訪問時にキャッチするための改善された方法は、Nextの開発者によって作成されたライブラリSWRを使用することです。

useSWRこれにより、データをより簡単にフェッチし、読み込みとエラーの状態を処理したり、何も変更されていない場合に将来のアクセスのためにデータをキャッシュしたりするための便利なフックが提供されます。変更されている場合は、古いデータがキャッシュから表示されている間に、バックグラウンドでデータをフェッチします。

注:フックの名前は、この「キャッシュ無効化」戦略にちなんで付けられています:「stale-while-revalidate」

これは、SWRを使用して行われた同じ要求です。

import useSWR from "swr";

const fetcher = (...args) => fetch(...args).then((res) => res.json())

export default function About() {
  const { data, error } = useSWR("/api/about", fetcher)

  if (error) return <div>Error fetching data</div>
  if (!data) return <div>Loading...</div>

  return (
    <div>
      <h1>{data.name}</h1>
    </div>
  )
}

データサーバー側のリクエスト

Nextでデータをフェッチして、ユーザーエクスペリエンスとSEO全体を向上させるさらに優れた方法は何ですか?

サーバーからデータをフェッチできるようにする、ページファイル内に直接含めることができる2つの関数があります。

はい、これらの関数はReactコンポーネントと同じファイルにありますが、それらのコードはReactクライアントとは別にバンドルされています。

  1. getServerSideProps
  2. getStaticProps

GetServerSideProps

getServerSidePropsすべてのページ訪問で実行されます。その結果、動的データのあるページや、認証されたユーザーデータの取得など、毎回リクエストを実行する必要があるページで非常に役立ちます。

export default function About({ name }) {
  return (
    <div>
      <h1>My name is: {name}</h1>
    </div>
  );
}

export function getServerSideProps() {
  return {
    props: { name: "Reed Barger" },
  };
}

この関数は、その名前が示すとおりに機能します。サーバーからデータを送信し、ページコンポーネントの小道具に挿入することができます。

この機能の優れている点は、Reactクライアントが遅延なしでデータをすぐに表示できることと、読み込みやエラー状態を処理する必要がないことです。

サーバーからデータをフェッチしたい場合は、キーワードgetServerSidePropsを使用して非同期にすることで取得できます。async

export default function About({ name }) {
  return (
    <div>
      <h1>My name is: {name}</h1>
    </div>
  );
}

export async function getServerSideProps() {
  const data = await fetch("https://randomuser.me/api").then((res) =>
    res.json()
  );

  return {
    props: { name: data.results[0].name.first },
  };
}

ここでは、ランダムユーザーAPIから動的にデータをフェッチしており、ページを更新するたびにデータが変更されます。

GetStaticProps

getServerSideProps関数の名前を。に変更しましょうgetStaticProps

この場合も、関数はその名前が示すとおりに機能します。それともそうですか?

getStaticProps変更頻度の低い静的ページに適した関数です。この関数はサーバーコードを実行し、サーバー上でGETリクエストを作成しますが、プロジェクトのビルド時に1回だけ実行します。

ただし、開発中のアプリを実行すると、のようにページを更新するたびにデータが要求されるようgetServerSidePropsです。

getStaticProps 開発中は、ページにアクセスするたびにのみリクエストを行うことに注意してください。

yarn buildを使用して本番ビルドまたはReactプロジェクトを実行してから実行するとyarn start、何度更新しても、同じ名前(実行時ではなく、プロジェクトのビルド時に要求された名前)が取得され続けることがわかります。

getStaticPropsからリクエストされたサンプル結果

この時点で、「なぜこれら2つの関数でAPIルートを使用するのか」と疑問に思われるかもしれません。

getServerSidePropsとは両方ともgetStaticPropsGETリクエストしか実行できないという事実に注意することが重要です。APIルートは、データを読み取って更新するためのあらゆるタイプのリクエストを処理できます(つまり、データベースなどのデータレイヤーと組み合わせる場合)

Next.jsを学ぶ場所

ここで取り上げたのはNextの表面をかじっただけですが、今日のReactプロジェクトでNextを使い始めるために必要なすべてのものをすでに手に入れています。

より詳細で技術的なガイドが必要な場合は、公式サイトにNext.jsをゼロから学ぶ方法に関するインタラクティブなコースがあります。

(無料の)Next.js学習コース

そして、「次の」ステップに進む準備ができていて、本格的なReactアプリケーションをゼロから構築したい場合は、ReactBootcampをチェックしてください

あなたはReactの学習に真剣に取り組んでいるので、私はあなたをReactプロにするための完全で究極のリソースをまとめました。

  • 導入から導入まで、本番環境に対応したすばらしいアプリを構築する
  • 基本的な概念から最新の機能までReactを深く理解する
  • 6桁の給与を命じる需要の高い開発者になる 

リンク:https ://www.freecodecamp.org/news/nextjs-tutorial/

#nextjs  #reactjs 

Next.jsをできるだけ簡単に使い始めましょう

Next.js: The React Framework

Getting Started

Visit https://nextjs.org/learn to get started with Next.js.

Documentation

Visit https://nextjs.org/docs to view the full documentation.

Who is using Next.js?

Next.js is used by the world's leading companies. Check out the Next.js Showcase to learn more.

Community

The Next.js community can be found on GitHub Discussions, where you can ask questions, voice ideas, and share your projects.

To chat with other community members you can join the Next.js Discord.

Our Code of Conduct applies to all Next.js community channels.

Contributing

Please see our contributing.md.

Good First Issues

We have a list of good first issues that contain bugs which have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process.

Download Details:
Author: vercel
Source Code: https://github.com/vercel/next.js
License: MIT License

#react #next #nextjs #javascript #typescript 

Next.js: The React Framework
Jade Bird

Jade Bird

1642136064

Spotify API Authentication in Next.js with Netlify API Auth

Spotify API Authentication in Next.js with Netlify API Auth

Learn how to easily make authenticated requests to the Spotify Web API using Netlify API Authentication. We'll walk through spinning up a new Next.js app from a demo starter, deploying a Netlify site with API Authentication enabled, connecting Spotify, and using getStaticProps to dynamically fetch the Spotify account's Top Artists and Top Tracks.

🧐 What's Inside

00:00 - Intro
00:13 - Tools we'll use including Spotify Web API, Netlify API Auth, and Next.js
02:05 - Creating a new Next.js app from a Starter Demo
03:09 - Setting up a new repository in GitHub from a local project
03:52 - Deploying a Next.js site on Netlify from a connected GitHub repository
04:54 - Enabling the API Authentication feature in Netlify Labs
05:29 - Adding API Authentication and connecting to the Spotiy API with a Netlify Site
06:59 - Installing and logging in with the Netlify CLI to locally develop with the Netlify Site environment
09:55 - Using Netlify Function helpers to get enviroment secrets and Spotify session token
11:43 - Fetching top artists and tracks from the Spotify Web API
18:49 - Outro

🗒️ Read More
https://spacejelly.dev/posts/how-to-authenticate-spotify-web-api-requests-in-next-js-with-netlify-api-auth/ 

💾 Code
https://github.com/colbyfayock/my-spotify-rewrapped 

#spotify #nextjs #netlify #webapi #api #webdevelopment #next #react #reactjs #webdev 

Spotify API Authentication in Next.js with Netlify API Auth

Build a Next.js App with Supabase and Deploy It to Netlify

Build an App With Supabase and NextJS

Supabase combines database storage and authentication into a powerful workflow for web devs. In this episode, Jon Meyers will teach us how to build a Next.js app with Supabase and deploy it to Netlify!

00:00:00 Welcome
00:01:06 Guest introduction
00:03:41 What is Supabase?
00:08:02 Why does Supabase work so well?
00:12:28 How realtime is Supabase?
00:15:45 How much do I need to know in order to use Supabase?
00:19:16 Do you have to think about database scheme before starting with Supabase?
00:23:18 How do we get started with Supabase?
00:30:06 Quick tour of the Supabase navigation
00:31:15 What's the difference between text and varchar?
00:48:25 Supabase API key clarification
00:53:49 Setting policies
00:59:18 Creating a post details page
01:05:46 Adding auth to Supabase
01:11:20 Creating a comments table
01:20:37 Making it real time

*   demo: https://supabase-blog.netlify.app/ 

*   repo: https://github.com/learnwithjason/supabase-blog 

Links:  

- https://supabase.com/ 

- https://egghead.io/courses/build-a-saas-product-with-next-js-supabase-and-stripe-61f2bc20?af=azvpe4 

- https://ntl.fyi/cli 

- https://nextjs.org/ 

- https://www.netlify.com 

#supabase #nextjs #next #netlify

Build a Next.js App with Supabase and Deploy It to Netlify
Code  JS

Code JS

1642065784

How to Build a Fullstack app from Scratch with Redis and Next.js

You probably know Redis as an ultrafast in-memory database, but can it also be used as your primary app database? This tutorial will teach you how to build a fullstack app from scratch with Redis and Next.js capable of performing fulltext instant search.

📚 Chapters

00:00 What is Redis?
00:49 App tour
01:33 How to Install Redis Cloud
02:49 Redis Crash Course
04:10 Next.js Setup
05:32 Schema & Entity
06:41 CRUD Operations
09:14 Fulltext Search

🔗 Resources

Redis OM (NodeJS) - https://redis.info/3F9yqI5 
Redis Insight - https://redis.info/3teM5LD 
Redis Launchpad - https://redis.info/3HS9g2B 
Redis Developer Hub  - https://redis.info/3qg14mY 
Full Tutorial - https://fireship.io/lessons/redis-nextjs/ 

Subscribe: https://www.youtube.com/c/Fireship/featured 

#redis #nextjs 

How to Build a Fullstack app from Scratch with Redis and Next.js

Why is Next.js So Fast? 🤯

Why is Next.js So Fast? 🤯

Applications built with Next.js are incredibly fast, thanks to static sites and server-side rendering. In this video, let's explore why Next.js is so fast and what is the difference between Static Side Generation and Server Side Rendering.

Timestamps
0:00 Teaser
0:24 Statically Generated Page
2:12 Server Side Rendered Page
6:39 Conclusion
7:28 Outro


#nextjs #reactjs #programming #next #react 

Why is Next.js So Fast? 🤯
Diego  Elizondo

Diego Elizondo

1641890599

Cómo Preservar El Estado Del formulario En React.js

Los formularios web juegan un papel importante en muchos sitios de Internet y son algo que debe saber cómo crear como desarrollador web.

Desde buenos formularios de inicio de sesión hasta formularios de registro y formularios de encuestas (o como se llamen en estos días), su objetivo principal es recibir datos y enviarlos a un servidor back-end donde se almacenan.

En este artículo, vamos a ver cómo podemos convertir los datos obtenidos de un formulario de un tipo a otro con JavaScript. Pero, antes de seguir leyendo este artículo, debe comprender lo siguiente:

  • Los fundamentos de React.js
  • Cómo preservar el estado del formulario en React.js
  • Cómo crear componentes de entrada controlados

Además, en este artículo, cubriremos:

  • Cómo enviar los datos del formulario que obtienes a un servidor backend a través de una API
  • Cómo obtener el valor exacto de una etiqueta en la optionsmatriz del paquete react-dropdown-select.

Ahora que sabe lo que necesita para comenzar con este artículo, profundicemos.

Empezando

Construiremos un formulario simple con React en este artículo para que podamos entender cómo funciona el proceso. Para hacer eso, usaremos Next.js para iniciar nuestra aplicación. Si es nuevo en Next.js, puede consultar su documentación aquí .

Ahora obtengamos todas las dependencias que necesitaremos en este proyecto. Dado que es un proyecto Next.js, comencemos configurando una próxima aplicación:

npx create-next-app name-of-your-app

El comando anterior instalará todas las dependencias importantes que necesitamos en una función de la aplicación Next.js. Las siguientes dependencias que necesitamos en este proyecto son:

  • xios para la obtención de datos, y
  • componentes con estilo para diseñar la aplicación.

El siguiente comando hace eso por nosotros:

npm install styled-components react-dropdown-select axios --save-dev

Una estructura de proyecto típica de Next.js es diferente de la de create-react-app . Para que este artículo sea conciso, no repasaremos la estructura completa de la aplicación; solo nos centraremos en lo que se aplica a nosotros.

Dicho esto, echemos un vistazo a la estructura de la aplicación a continuación:

|__pages
|   |-- _app.js
|   |-- index.js
|__src
|   |__components
|   |    |__role
|   |    |   |__style
|   |    |     |-- role.styled.js
|   |    |__index.js        
|   |
|   |__containers
|   |    |__dropdown-select 
|   |        |-- index.js
|   
|__

Resumen de la estructura de la aplicación

En la última sección, obtuvimos las dependencias requeridas para este proyecto. En esta sección, veremos la estructura del proyecto y la función que realiza cada archivo.

El directorio de páginas es donde tiene lugar todo el enrutamiento de la aplicación. Esta es una función lista para usar de Nextjs. Le ahorra el estrés de codificar sus rutas independientes.

pages/api: este directorio API le permite tener un backend para su aplicación Next.js. dentro de la misma base de código. Esto significa que no tiene que pasar por la forma común de crear repositorios separados para sus API REST o GraphQL e implementarlos en plataformas de alojamiento de back-end como Heroku, etc.

Con el directorio de la API, cada archivo se trata como un punto final de la API. Si observa la carpeta API, notará que tenemos un archivo llamado user.js. Ese archivo se convierte en un punto final, lo que significa que se puede realizar una llamada API usando la ruta al archivo como URL base.

pages/_app.jses donde todos nuestros componentes se unen al DOM. Si echa un vistazo a la estructura del componente, verá que todos los componentes también se pasan como accesorios de página a los accesorios del componente.

Es como el archivo index.js cuando se usa Create-React-App. La única diferencia aquí es que no está conectando su aplicación al nodo DOM llamado "raíz"

React.render(document.getElementById("root"), <App />)

index.jses la ruta predeterminada en la carpeta de páginas. Ahí es donde haremos la mayor parte del trabajo en este proyecto. Cuando ejecuta el siguiente comando, inicia un servidor de desarrollo y el contenido de index.js se representa en la página web.

components/role es el archivo de componente que alberga el componente de selección desplegable y su estilo

Y, por último, containers/dropdown-selectes donde estamos construyendo el componente de formulario.

Cómo construir el formulario y administrar el estado

Ahora que hemos visto algunas de las funciones básicas de las carpetas/archivos en la aplicación, comencemos a construir el componente de formulario. No nos centraremos en escribir los estilos en este artículo.

El fragmento de código siguiente muestra la estructura básica del componente de formulario sin las variables de estado. Adoptaremos un enfoque paso a paso para comprender lo que sucede en el fragmento.

import React from "react";
import styled from "styled-components";
import { InputGroup } from "../../components/role/style/role.styled";
import Role from "../../components/role";
import axios from "axios";

const AuthForm = styled.form`
	...
`;

const DropDownSelect = () => {
  return (
    <AuthForm onSubmit="">
      <h2>Register an Account...</h2>
      <InputGroup>
        <label htmlFor="email">Email address</label>
        <input
          name="email"
          id="email"
          type="email"
          placeholder="Enter email address"
          className="inputs"
        />
      </InputGroup>
      <InputGroup>
        <label htmlFor="password">Create password</label>
        <input
          name="password"
          id="password"
          type="password"
          placeholder="Create password"
          className="inputs"
        />
      </InputGroup>
      <Role />
   </AuthForm>
  );
};

export default DropDownSelect;

El componente anterior no tiene ningún medio para rastrear la entrada que el usuario escribe en los campos del formulario, y no queremos eso. Para solucionarlo, utilizaremos el useState()gancho de React para monitorear el estado

Comencemos por crear las variables de estado. Notará que tenemos tres campos de entrada en el componente, lo que significa que tendremos que crear tres variables de estado.

 const [email, setEmail] = React.useState("");
 const [password, setPassword] = React.useState("");
 const [role, setRole] = React.useState();

Pero necesitamos una forma de rastrear el estado de los datos que enviamos al servidor back-end, por lo que necesitamos otra variable de estado para monitorear el estado de nuestra solicitud de obtención de datos asincrónicos (POST).

Un patrón muy popular en el ecosistema de React es crear un componente de carga que indicará este proceso.

const [loading, setLoading] = React.useState(false);

Ahora que tenemos esto en su lugar, podemos configurar nuestros campos de entrada para que sean controlados usando el onChange()prop.

<input
  name="email"
  id="email"
  type="email"
  placeholder="Enter email address"
  className="inputs"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
/>

A continuación, el proceso se repite para los campos de entrada restantes. Pero, hay una trampa. Notará que ya importamos el <Role />componente y ya pasamos algunos accesorios predefinidos al componente. Echemos un vistazo al componente en sí antes de profundizar demasiado.

El componente de rol

Este componente utiliza el react-dropdown-selectpaquete por su funcionalidad, toma una matriz de valores en sus propiedades.

El accesorio menos requerido es el optionsaccesorio que recibe una serie de objetos con teclas labelyvalue

const options = [
   { label: "Manager", value: "Manager" },
   { label: "Worker", value: "Worker" }
]

Echemos un vistazo al componente a continuación:

import React from "react";
import { InputGroup } from "./style/role.styled";
import Select from "react-dropdown-select";
import propTypes from "prop-types";

const Role = ({ userRole, roleChange }) => {
  const options = [
    { label: "Worker", value: "Worker" },
    { label: "Manager", value: "Manager" },
  ];

  return (
    <React.Fragment>
      <InputGroup>
        <label htmlFor="fullname">Role</label>
        <Select
          value={userRole}
          options={options}
          placeholder="Please select your role"
          required={true}
          dropdownPosition="top"
          className="select"
          color="#ff5c5c"
          onChange={roleChange}
        />
      </InputGroup>
    </React.Fragment>
  );
};

export default Role;

Role.propTypes = {
  ...
};

Mencioné antes que el <Role />componente tiene sus propios accesorios personalizados, y puede verlo arriba.

El componente admite dos accesorios: userRoleque rastrea la entrada en función de la opción que selecciona el usuario y el roleChangeaccesorio que se pasa como un valor a la onChange()propiedad del <Select />componente.

El <Select />componente tiene varios accesorios que puede pasarle. Desde la dropdownPositionpropiedad que especifica dónde se coloca el menú de opciones en la página, hasta la colorpropiedad que afecta el estilo de los elementos en el menú de opciones, etc. Puedes echar un vistazo a algunos de ellos aquí .

Hicimos una declaración de importación que trae el "prop-types"módulo React en la parte superior del archivo de este componente. Usaremos este módulo para validar el tipo de datos que se pasan a este componente.

Role.propTypes = {
  userRole: propTypes.array.isRequired,
  roleChange: propTypes.func.isRequired,
};

Del fragmento anterior, indicamos que el tipo de datos que se pasarán userRolecomo valor debe ser un tipo de datos de matriz de JavaScript y roleChangese requiere que sea una función. Cualquier otra cosa que no sea esto resultará en un error.

Cómo usar el componente de rol

Ahora que hemos revisado el <Role />componente y aprendido cómo funciona, echemos un vistazo a cómo podemos usarlo en la aplicación a continuación:

import React from "react";
import styled from "styled-components";
import { InputGroup } from "../../components/role/style/role.styled";
import Role from "../../components/role";

const AuthForm = styled.form`
 ...  
`;

const DropDownSelect = () => {
  const [role, setRole] = React.useState();
  
  return (
    <AuthForm onSubmit={handleSignUp}>
      <h2>Register an Account...</h2>
      // previous details    
      <Role
        userRole={role}
        roleChange={(role) => setRole(role.map((role) => role.value))}
      />
   </AuthForm>
  );
};

export default DropDownSelect;

El fragmento anterior muestra cómo <Role />se utiliza el componente. También puede ver los accesorios personalizados en uso. userRolese le asigna el rolevalor del estado.

Es posible que se haya preguntado por qué no asignamos ningún valor al rolevalor estatal que declaramos. Bueno, eso se debe a que el <Select />componente de react-dropdown-select tiene un valor de tipo de datos predeterminado de una matriz, por lo que no es necesario establecer una matriz en el useState()enlace.

La roleChangepropiedad se ve totalmente diferente de la forma anterior en que hemos estado usando la propiedad onChange en los campos de entrada. Aquí, tuvimos que colocar los elementos que necesitábamos en una matriz separada, para poder obtener los datos exactos cuando el usuario selecciona una opción.

roleChange={(role) => setRole(role.map((role) => role.value))}

Si puede recordar, teníamos una matriz llamada optionsque tenía pares de valores clave de labely value. El fragmento anterior nos ayuda a colocar la valueclave en una matriz completamente nueva, ya que eso es lo que necesitamos, y esto es posible con el map()método incorporado de JavaScript.

Cuando el usuario hace clic en cualquier opción, obtendremos una matriz que contiene solo un elemento que se seleccionó. Digamos, por ejemplo, que el usuario hace clic en la opción "Trabajador", el valor que se almacena en el estado del formulario es: ['Worker'].

Pero no queremos que este tipo de datos se envíe al servidor; en su lugar, queremos una cadena. Entonces, ¿cómo arreglamos esto?, te preguntarás. Veremos cómo podemos hacerlo en la siguiente sección.

Cómo enviar los datos del formulario al servidor

En las secciones anteriores, aprendió sobre la estructura de una aplicación Next.js y cómo crear y administrar el estado en un formulario React.

En esta sección, enviaremos los datos que obtuvimos del formulario al servidor backend a través de una API.

import React from "react";
import styled from "styled-components";
import { InputGroup } from "../../components/role/style/role.styled";
import Role from "../../components/role";
import axios from "axios";

const AuthForm = styled.form`
  ...
`;

const DropDownSelect = () => {
  ...
  const [loading, setLoading] = React.useState(false);

  const handleSignUp = async (e) => {
    e.preventDefault();

    try {
      setLoading(true);

      const response = await axios({
        method: "POST",
        url: "https://your-api-endpoint.com",
        data: {
          email,
          password,
          role: role.toString(),
        },
        headers: {
          "Content-Type": "application/json",
        },
      });
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <AuthForm onSubmit={handleSignUp}>
      <h2>Register an Account...</h2>
	  // form feilds
      <button className="btn">{loading ? "Registering" : "Register"}</button>
    </AuthForm>
  );
};

export default DropDownSelect;

Nos centraremos en la función de llamada de datos asincrónicos handleSignup, que usaremos para enviar los datos al servidor a través del extremo de la API.

const handleSignUp = async (e) => {
    e.preventDefault();

    try {
      setLoading(true);

      const response = await axios({
        method: "POST",
        url: "https://your-api-endpoint.com",
        data: {
          email,
          password,
          role: role.toString(),
        },
        headers: {
          "Content-Type": "application/json",
        },
      });
    } catch (error) {
      console.log(error);
    }
  };

El valor inicial del loadingestado se estableció en false, pero en el trybloque es true. Esto significa que, si la llamada de datos asincrónicos está en curso, el valor de carga debe ser true. Si no, debería serlo false.

Mencionamos antes que no queremos enviar un tipo de datos de matriz como valor de entrada al servidor. En su lugar, queremos una cadena. Hacemos esto usando el método de cadena nativa [ toString()] de JavaScript para transformar este tipo de datos.

data: {
  role: role.toString()
}

El loadingvalor del estado se puede ver en acción a continuación. Estamos usando un operador ternario para verificar si la variable de estado de carga es verdadera. En caso afirmativo, el texto en el botón será "Registrarse" . Si No, el texto permanece sin cambios.

<button className="btn">{loading ? "Registering" : "Register"}</button>

Puede jugar con el fragmento a continuación para confirmar si el resultado es exacto o no.

const options = [
   { label: "Worker", value: "Worker" },
   { label: "Manager", value: "Manager" }
]

// create a new array with the key value that you want
const mappedOptions = options.map(option => option.value)
console.log(mappedOptions) // ['Worker', 'Manager']

// convert the mapped option array to a string value
const mappedOptionsToString = mappedOptions.toString()
console.log(mappedOptionsToString)

Conclusión

Si su API de back-end le permite enviar un tipo de datos de matriz como un valor de un campo de entrada, puede usar lo que aprendió aquí, porque el paquete react-dropdown-select le permite hacer eso.

Pero en escenarios donde el valor que se requiere de su campo de entrada es una cadena, entonces puede considerar usar el toString()método nativo de JavaScript como desee.

Aquí está el enlace a la aplicación de demostración implementada y un GIF que muestra cómo se ve con todos los estilos aplicados:

Gracias por leer este artículo. Si lo ha encontrado útil, por favor compártalo con sus compañeros. 

Enlace: https://www.freecodecamp.org/news/how-to-send-the-right-data-type-from-a-form-to-the-backend-server/

 #react  #javascript  #nextjs 

Cómo Preservar El Estado Del formulario En React.js
藤本  結衣

藤本 結衣

1641888300

React-dropdown-selectのデフォルト値を配列から文字列に変換する

Webフォームは、インターネット上の多くのサイトで重要な役割を果たしており、Web開発者として構築する方法を知っておく必要があります。

古き良きログインフォームからサインアップフォームや調査フォーム(または最近では何と呼ばれているものでも)まで、それらの主な目的は、データを受信し、それらが保存されているバックエンドサーバーに送信することです。

この記事では、JavaScriptを使用して、フォームから取得したデータをあるタイプから別のタイプに変換する方法を説明します。ただし、この記事をさらに読む前に、次のことを理解しておく必要があります。

  • React.jsの基本
  • React.jsでフォームの状態を保持する方法
  • 制御された入力コンポーネントを作成する方法

また、この記事では、以下について説明します。

  • 取得したフォームデータをAPIを介してバックエンドサーバーに送信する方法
  • optionsreact-dropdown-selectパッケージの配列でラベルの正確な値を取得する方法。

この記事を始めるために何が必要かがわかったので、詳しく見ていきましょう。

入門

この記事では、プロセスがどのように機能するかを理解できるように、Reactを使用して単純なフォームを作成します。そのために、Next.jsを使用してアプリケーションをブートストラップします。Next.jsを初めて使用する場合は、こちらのドキュメントをご覧ください

次に、このプロジェクトで必要になるすべての依存関係を取得しましょう。これはNext.jsプロジェクトなので、next-appを設定することから始めましょう。

npx create-next-app name-of-your-app

上記のコマンドは、Next.jsアプリ関数に必要なすべての重要な依存関係をインストールします。このプロジェクトで必要な次の依存関係は次のとおりです。

  • データフェッチ用のxios、および
  • styled-アプリのスタイルを設定するコンポーネント

以下のコマンドは私たちのためにそれを行います:

npm install styled-components react-dropdown-select axios --save-dev

典型的なNext.jsプロジェクトの構造は、create-react-appの構造とは異なります。この記事を簡潔にするために、完全なアプリケーション構造については説明しません。ここでは、適用されるものにのみ焦点を当てます。

そうは言っても、以下のアプリの構造を見てみましょう。

|__pages
|   |-- _app.js
|   |-- index.js
|__src
|   |__components
|   |    |__role
|   |    |   |__style
|   |    |     |-- role.styled.js
|   |    |__index.js        
|   |
|   |__containers
|   |    |__dropdown-select 
|   |        |-- index.js
|   
|__

アプリの構造の概要

前のセクションでは、このプロジェクトに必要な依存関係を取得しました。このセクションでは、プロジェクトの構造と各ファイルが実行する機能について説明します。

ページディレクトリは、アプリのすべてのルーティングが行われる場所です。これは、Nextjsのすぐに使用できる機能です。これにより、独立したルートをハードコーディングするストレスが軽減されます。

pages/api:このAPIディレクトリを使用すると、Next.jsアプリのバックエンドを使用できます。同じコードベース内。つまり、RESTまたはGraphQL API用に個別のリポジトリを作成し、Herokuなどのバックエンドホスティングプラットフォームにデプロイするという一般的な方法を実行する必要はありません。

APIディレクトリを使用すると、すべてのファイルがAPIエンドポイントとして扱われます。APIフォルダーを見ると、user.jsというファイルが含まれていることがわかります。そのファイルはエンドポイントになります。つまり、ファイルへのパスをベースURLとして使用してAPI呼び出しを実行できます。

pages/_app.jsここで、すべてのコンポーネントがDOMに接続されます。コンポーネントの構造を見ると、すべてのコンポーネントがpag​​ePropsとしてComponentpropsにも渡されていることがわかります。

Create-React-Appを使用する場合のindex.jsファイルのようなものです。ここでの唯一の違いは、アプリを「ルート」と呼ばれるDOMノードにフックしていないことです。

React.render(document.getElementById("root"), <App />)

index.jsページフォルダのデフォルトルートです。ここで、このプロジェクトのほとんどの作業を行います。以下のコマンドを実行すると、開発サーバーが起動し、index.jsのコンテンツがWebページに表示されます。

components/role ドロップダウン選択コンポーネントとそのスタイルを格納するコンポーネントファイルです

そして最後に、containers/dropdown-selectフォームコンポーネントを構築しているところです。

フォームを作成して状態を管理する方法

アプリ内のフォルダー/ファイルの基本的な機能のいくつかを確認したので、フォームコンポーネントの作成を開始しましょう。この記事では、スタイルの記述に焦点を当てません。

以下のコードスニペットは、状態変数を含まないフォームコンポーネントの基本構造を示しています。スニペットで何が起こっているのかを理解するために、段階的なアプローチを取ります。

import React from "react";
import styled from "styled-components";
import { InputGroup } from "../../components/role/style/role.styled";
import Role from "../../components/role";
import axios from "axios";

const AuthForm = styled.form`
	...
`;

const DropDownSelect = () => {
  return (
    <AuthForm onSubmit="">
      <h2>Register an Account...</h2>
      <InputGroup>
        <label htmlFor="email">Email address</label>
        <input
          name="email"
          id="email"
          type="email"
          placeholder="Enter email address"
          className="inputs"
        />
      </InputGroup>
      <InputGroup>
        <label htmlFor="password">Create password</label>
        <input
          name="password"
          id="password"
          type="password"
          placeholder="Create password"
          className="inputs"
        />
      </InputGroup>
      <Role />
   </AuthForm>
  );
};

export default DropDownSelect;

上記のコンポーネントには、ユーザーがフォームフィールドに入力した入力を追跡する手段がないため、これは望ましくありません。それを整理するために、ReactのuseState()フックを使用して状態を監視します

状態変数を作成することから始めましょう。コンポーネントに3つの入力フィールドがあることに気付くでしょう。つまり、3つの状態変数を作成する必要があります。

 const [email, setEmail] = React.useState("");
 const [password, setPassword] = React.useState("");
 const [role, setRole] = React.useState();

ただし、バックエンドサーバーに送信するデータの状態を追跡する方法が必要なため、非同期データフェッチ(POST)リクエストのステータスを監視するための別の状態変数が必要です。

Reactエコシステムで非常に人気のあるパターンは、このプロセスを示す読み込みコンポーネントを作成することです。

const [loading, setLoading] = React.useState(false);

これで、onChange()小道具を使用して制御する入力フィールドを設定できます。

<input
  name="email"
  id="email"
  type="email"
  placeholder="Enter email address"
  className="inputs"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
/>

その後、残りの入力フィールドに対してこのプロセスが繰り返されます。しかし、落とし穴があります。すでに<Role />コンポーネントをインポートしていて、いくつかの事前定義された小道具をコンポーネントに渡していることに気付くでしょう。深く掘り下げる前に、コンポーネント自体を見てみましょう。

ロールコンポーネント

このコンポーネントは、react-dropdown-selectその機能のためにパッケージを利用し、プロパティに値の配列を取り込みます。

少なくとも必要な小道具があるoptionsと、オブジェクトの配列受け支柱labelvalueキー

const options = [
   { label: "Manager", value: "Manager" },
   { label: "Worker", value: "Worker" }
]

以下のコンポーネントを見てみましょう。

import React from "react";
import { InputGroup } from "./style/role.styled";
import Select from "react-dropdown-select";
import propTypes from "prop-types";

const Role = ({ userRole, roleChange }) => {
  const options = [
    { label: "Worker", value: "Worker" },
    { label: "Manager", value: "Manager" },
  ];

  return (
    <React.Fragment>
      <InputGroup>
        <label htmlFor="fullname">Role</label>
        <Select
          value={userRole}
          options={options}
          placeholder="Please select your role"
          required={true}
          dropdownPosition="top"
          className="select"
          color="#ff5c5c"
          onChange={roleChange}
        />
      </InputGroup>
    </React.Fragment>
  );
};

export default Role;

Role.propTypes = {
  ...
};

<Role />コンポーネントには独自のカスタムプロップがあることを前に説明しましたが、上記で確認できます。

コンポーネントは2つの小道具を受け取りuserRoleます。ユーザーが選択したオプションに基づいて入力を追跡する小道具と、コンポーネントのプロパティにroleChange値として渡される小道具です。onChange()<Select />

<Select />コンポーネントは、あなたがそれに渡すことができる様々な小道具を持っています。dropdownPositionオプションメニューがページ上のどこに配置されるかを指定する小道具から、オプションメニューcolorの項目のスタイルに影響を与える小道具までなど。ここでそれらのいくつかを見ることができます

"prop-types"このコンポーネントのファイルの先頭にReactモジュールを取り込むimportステートメントを作成しました。このモジュールを使用して、このコンポーネントに渡されるデータのタイプを検証します。

Role.propTypes = {
  userRole: propTypes.array.isRequired,
  roleChange: propTypes.func.isRequired,
};

上記のスニペットからuserRole、値として渡されるデータの型はJavaScript配列データ型でroleChangeある必要があり、関数である必要があると述べました。これら以外のものはエラーになります。

ロールコンポーネントの使用方法

今、私たちが通過したことを<Role />コンポーネントと、それがどのように動作するかを学び、我々は以下のアプリでそれを使用する方法を見てみましょう:

import React from "react";
import styled from "styled-components";
import { InputGroup } from "../../components/role/style/role.styled";
import Role from "../../components/role";

const AuthForm = styled.form`
 ...  
`;

const DropDownSelect = () => {
  const [role, setRole] = React.useState();
  
  return (
    <AuthForm onSubmit={handleSignUp}>
      <h2>Register an Account...</h2>
      // previous details    
      <Role
        userRole={role}
        roleChange={(role) => setRole(role.map((role) => role.value))}
      />
   </AuthForm>
  );
};

export default DropDownSelect;

上記のスニペットは、<Role />コンポーネントがどのように使用されているかを示しています。使用中のカスタムプロップも見ることができます。状態値userRoleが割り当てられroleます。

role宣言した状態の値に値を割り当てなかったのはなぜか疑問に思われるかもしれません。これは<Select />react-dropdown-selectのコンポーネントが配列のデフォルトのデータ型値を持っているため、useState()フックに配列を設定する必要がないためです。

roleChange小道具は、私たちが使用してきた以前の方法とは全く違って見えるのonChange入力フィールドに小道具を。ここでは、ユーザーがオプションを選択したときに正確なデータを取得できるように、必要なアイテムを別の配列に配置する必要がありました。

roleChange={(role) => setRole(role.map((role) => role.value))}

思い出していただけると思いますが、とのoptionsキーと値のペアを持つという配列がlabelありましたvalue。上記のスニペットvalueは、必要なものであるため、キーをまったく新しい配列に配置するのに役立ちmap()ます。これは、JavaScriptの組み込みメソッドで可能です。

ユーザーがいずれかのオプションをクリックすると、選択された1つのアイテムのみを含む配列が取得されます。たとえば、ユーザーが「Worker」オプションをクリックした場合、フォームの状態で保存される値は次のようになり['Worker']ます。

ただし、このデータ型をサーバーに送信する必要はありません。代わりに文字列が必要です。では、これをどのように修正すればよいのでしょうか。次のセクションでそれを行う方法を説明します。

フォームデータをサーバーに送信する方法

前のセクションでは、Next.jsアプリの構造と、Reactフォームで状態を構築および管理する方法について学習しました。

このセクションでは、フォームから取得したデータをAPIを介してバックエンドサーバーに送信します。

import React from "react";
import styled from "styled-components";
import { InputGroup } from "../../components/role/style/role.styled";
import Role from "../../components/role";
import axios from "axios";

const AuthForm = styled.form`
  ...
`;

const DropDownSelect = () => {
  ...
  const [loading, setLoading] = React.useState(false);

  const handleSignUp = async (e) => {
    e.preventDefault();

    try {
      setLoading(true);

      const response = await axios({
        method: "POST",
        url: "https://your-api-endpoint.com",
        data: {
          email,
          password,
          role: role.toString(),
        },
        headers: {
          "Content-Type": "application/json",
        },
      });
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <AuthForm onSubmit={handleSignUp}>
      <h2>Register an Account...</h2>
	  // form feilds
      <button className="btn">{loading ? "Registering" : "Register"}</button>
    </AuthForm>
  );
};

export default DropDownSelect;

ここではhandleSignup、APIエンドポイントを介してサーバーにデータを送信するために使用する非同期データ呼び出し関数に焦点を当てます。

const handleSignUp = async (e) => {
    e.preventDefault();

    try {
      setLoading(true);

      const response = await axios({
        method: "POST",
        url: "https://your-api-endpoint.com",
        data: {
          email,
          password,
          role: role.toString(),
        },
        headers: {
          "Content-Type": "application/json",
        },
      });
    } catch (error) {
      console.log(error);
    }
  };

loading状態の初期値はに設定されてfalseいましたが、tryブロック内ではtrueです。これは、非同期データ呼び出しが行われている場合、ロード値はである必要があることを意味しますtrue。そうでない場合は、である必要がありますfalse

配列データ型を入力値としてサーバーに送信したくないことは前述しました。代わりに文字列が必要です。これを行うにはtoString()、JavaScriptのネイティブ文字列メソッド[ ]を使用して、このデータ型を変換します。

data: {
  role: role.toString()
}

loading状態値は、以下のアクションで見ることができます。三項演算子を使用して、loadin状態変数がtrueであるかどうかを確認しています。はいの場合、ボタンのテキストは「登録中」になります。 いいえの場合、テキストは変更されません。

<button className="btn">{loading ? "Registering" : "Register"}</button>

以下のスニペットを試して、結果が正確かどうかを確認できます。

const options = [
   { label: "Worker", value: "Worker" },
   { label: "Manager", value: "Manager" }
]

// create a new array with the key value that you want
const mappedOptions = options.map(option => option.value)
console.log(mappedOptions) // ['Worker', 'Manager']

// convert the mapped option array to a string value
const mappedOptionsToString = mappedOptions.toString()
console.log(mappedOptionsToString)

結論

バックエンドAPIで配列データ型を入力フィールドからの値として送信できる場合は、react-dropdown-selectパッケージで送信できるため、ここで学習した内容を使用できます。

ただし、入力フィールドに必要な値が文字列であるシナリオでは、必要に応じてtoString()JavaScriptのネイティブメソッドの使用を検討できます。

デプロイされたデモアプリへのリンクと、すべてのスタイルが適用されたときの外観を示すGIFは次のとおりです。

この記事を読んでいただきありがとうございます。役に立ったと思ったら、仲間と共有してください。 

リンク:https//www.freecodecamp.org/news/how-to-send-the-right-data-type-from-a-form-to-the-backend-server/

#reactjs  #javascript  #nextjs 

React-dropdown-selectのデフォルト値を配列から文字列に変換する

Next.js 12リリース、React18が一部利用可能に !?

Next.js 12リリース、React18が一部利用可能に | Apple Storeポリシー変更 | Chrome95 リリース | Facebook社名変更 エンジニアニュース

▶︎目次
0:00 Next.js 12リリース
8:33 Edge Functions
9:30 Apple Storeポリシーアップデート
11:17 Chrome95リリース
12:18 Facebook社名変更
13:09 React国際サミット、Ruby Conf2021が開催予定
13:28 LT会告知!

#nextjs #react-native 

Next.js 12リリース、React18が一部利用可能に !?

Generate Personalized Social Media Cards for Landing Pages with Next.js & Cloudinary

Personalized Social Media Cards for Landing Pages with Next.js & Cloudinary

Learn how to dynamically generate social media cards for a landing page with personalized details of a user's GitHub profile with Cloudinary. We'll walk through spinning up a Next.js app from a starter, using Cloudinary to programmatically design a social media card image, and using it to add SEO metadata including Open Graph and Twitter tags to a page.

🧐 What's Inside
00:00 - Intro
00:13 - What we'll build and tools we'll use like Next.js and Cloudinary
02:08 - Creating a new Next.js app from a Starter demo
03:49 - Designing a social card and uploading the base image to Cloudinary
05:20 - Installing the Cloudinary Node SDK and creating a new image URL
10:04 - Adding a dynamic image overlay to a Cloudinary image with a GitHub avatar
13:03 - Adding dynamic text from a GitHub profile to a Cloudinary image
16:48 - Nesting additional text overlays to allow for vertical reflow with dynamic text
23:45 - Using Open Graph and custom Twitter metadata to define our image as a social card
29:12 - Outro

🗒️ Read More
https://spacejelly.dev/posts/how-to-generate-personalized-social-media-cards-for-landing-pages-with-next-js-cloudinary/ 

💾 Code
https://github.com/colbyfayock/my-landing-page 

#nextjs #cloudinary #webdevelopment #webdev 

Generate Personalized Social Media Cards for Landing Pages with Next.js & Cloudinary

Building full-featured Marketing Automation using Nextjs & Customer.io

Marketing Automation with Customer io + Next js

Joel hooks has been building full-featured marketing automation using Nextjs & Customer.io for some of the most popular dev education sites out there. In this episode, he'll share how it's done!

00:00:00 Welcome
00:01:00 Guest introduction
00:03:32 Topic introduction
00:22:28 Where should we start?
00:30:57 Working from a root page vs a subdirectory
00:39:18 Refactoring a bit
00:44:13 Switching to automation from hard coded
00:59:05 Checking if someone is a customer
01:02:41 What could go wrong?
01:09:45 Working with visible source
01:17:56 Jason pretends he's a hacker
01:25:09 When should you start paying for automation?

*   demo: https://marketing-automation-next.netlify.app/ 

*   repo:  https://github.com/learnwithjason/marketing-automation 

#nextjs #next #webdev 

Building full-featured Marketing Automation using Nextjs & Customer.io
Web  Dev

Web Dev

1641351256

Build Dynamic Landing Pages with Next.js, Tailwind CSS and DatoCMS

Build a Dynamic Course Landing Page with Next.js, Tailwind CSS, and DatoCMS

Build a fully dynamic course landing page with some of my favorite technologies: Next.js, Tailwind CSS, and DatoCMS. We will use DatoCMS as a Headless CMS to host all of our content. In doing so, we'll explore how to handle data modeling, create custom components, etc. Then, we'll pull all of that content into a Next.js project using GraphQL, and style it up with Tailwind CSS.

#nextjs #tailwind #tailwindcss #css #webdev #cms 

 

Build Dynamic Landing Pages with Next.js, Tailwind CSS and DatoCMS