¿Cómo agregar entrada de teléfono en NextJS?

En este artículo, vamos a aprender cómo podemos agregar una entrada de teléfono en NextJs. NextJS es un marco basado en React. Tiene el poder de desarrollar hermosas aplicaciones web para diferentes plataformas como Windows, Linux y Mac.

Enfoque: para agregar la entrada de nuestro teléfono, vamos a utilizar el paquete react-phone-input-2. El paquete react-phone-input-2 nos ayuda a integrar la entrada del teléfono en nuestra aplicación. Primero, instalaremos el paquete react-phone-input-2 y luego agregaremos una entrada de teléfono en nuestra página de inicio.

Crear aplicación NextJS: puede crear un nuevo proyecto NextJs usando el siguiente comando:

npx create-next-app gfg

Instale el paquete requerido: ahora instalaremos el paquete react-phone-input-2 usando el siguiente comando:

npm i react-phone-input-2

Estructura del proyecto: Se verá así.

Agregar la entrada de teléfono: después de instalar el paquete, podemos agregar fácilmente una entrada de teléfono en cualquier página de nuestra aplicación. Para este ejemplo, vamos a agregar una entrada de teléfono a nuestra página de inicio.

Agregue el siguiente contenido en el archivo index.js :

import React, { useState } from "react";
import PhoneInput from 'react-phone-input-2'
import 'react-phone-input-2/lib/style.css'
  
export default class PhoneInputGfg extends React.Component {
  constructor(props) {
    super(props);
    this.state = { phone: "" };
  }
  render(){
    return (
      <div>
        <h1>NextJs Phone Input - GeeksforGeeks</h1>
        <PhoneInput
          country={'us'}
          value={this.state.phone}
          onChange={phone => this.setState({ phone })}
        />
      </div>
    );
  }
};

Explicación: en el ejemplo anterior primero, estamos importando el componente PhoneInput y el gancho useState de reaccionar. Luego estamos usando el enlace useState para almacenar el valor del número de teléfono. Después de eso, estamos agregando la entrada de nuestro teléfono usando el paquete instalado.

Pasos para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar la aplicación.

npm run dev

Producción: