Tutorial de VS Code: Cómo configurar un proyecto React.js con Next.js

Next.js es el marco de desarrollo web de código abierto que se utiliza para generar sitios web estáticos y también permite la representación del lado del servidor para aplicaciones web basadas en React.

Veamos cómo configurar el proyecto de reacción con next.js.

Requisitos:

• código de estudio visual
• Nodo.js
• Siguiente.js
• Conocimiento básico de React y JavaScript

Paso 1: Instale el código de Visual Studio

Visual Studio Code es un editor de código gratuito y de código abierto que se ejecuta sin problemas en Windows, Linux y macOS. Puedes descargarlo desde aquí .

Paso 2: Instalar Node.js

Node.js es un tiempo de ejecución de JavaScript que ayuda al lenguaje de programación JavaScript a ejecutarse y ejecutarse en servidores. Puede descargar Node.js según los requisitos de su sistema desde aquí . Asegúrese de que puede descargar solo la versión LTS que es estable.

Paso 3: crear un directorio vacío

Cree una carpeta/directorio vacío en su unidad local (C:, E:, D: o cualquiera) y agréguelo a Visual Studio Code .

Abra una nueva ventana en VS Code. Haga clic en la carpeta abierta.

Luego, seleccione y agregue la carpeta vacía que ha creado. He creado la carpeta nextjs-setup .

Después de seleccionar la ventana, puede ver que se agrega al código VS.

Paso 4: Abrir terminal para carpeta vacía

Vaya a la barra de menús y haga clic en el menú Terminal . Puede ver la opción Nueva terminal allí. Haz clic en eso.

Puede ver a continuación, abrirá una terminal para la ruta en la que ha creado una carpeta vacía y que también es su carpeta raíz.

Paso 5: Inicializar proyecto

Ejecute el siguiente comando para inicializar el proyecto. El siguiente comando creará automáticamente un archivo package.json en el directorio.

Escriba debajo del comando y presione enter.

Dominio:

 npm init -y

Se crea el archivo package.json.

Paso 6: Instalar Next.js

Use el siguiente comando para instalar next.js.

Dominio:

 npm install react react-dom next –save

Presiona enter y obtendrás la siguiente pantalla después de que se complete la instalación.

Paso 7: Realice cambios en package.json

Puede ver el siguiente código en el archivo package.json.

Reemplace el código anterior con el siguiente y guárdelo .

 ‎ "scripts" : { "dev" : "next" , "build" : "next build" , "start" : "next start" }, ‎

Lea el siguiente párrafo antes de pasar al siguiente paso,

Next.js tiene enrutamiento basado en archivos. Cualquier archivo JavaScript que coloque en el directorio /pages se ejecutará. Además, index.js es el archivo predeterminado que se ejecuta cuando el usuario accede a la raíz (página de inicio) del sitio web.

Paso 8: Cree la carpeta de páginas y el archivo index.js

Puede ver en la imagen de abajo que hay dos íconos resaltados por mí (el primero es un archivo nuevo y el segundo es una carpeta nueva ). Seleccione NEXTJS-SETUP y cree primero la carpeta " páginas" .

Después de eso, seleccione la carpeta "páginas" y haga clic en el nuevo archivo y cree index.js dentro de la carpeta "páginas".

Paso 9: Ingrese el código de muestra índice.js

Coloque el código de reacción a continuación en el archivo index.js que devuelve el componente de página simple. No olvides guardar .

 function Page ( ) { return ( < div > <h1>Hello World</h1> </ div > ); } export default Page;

Paso 10: Inicie el sitio web

Escriba el siguiente comando para almorzar en el sitio web que se ejecuta en el marco next.js.

Dominio:

 npm run dev

Puedes ver el siguiente resultado:

Su sitio web está listo para ejecutarse en http://localhost:3000 . Ponga esta URL en el navegador y presione enter. Deberías ver la siguiente página. Eso es todo. 🙂

Conclusión:

Express.js facilita el trabajo del desarrollador al proporcionar funcionalidad para crear API, enviar solicitudes HTTP y enrutamiento. Por lo tanto, será fácil para los desarrolladores concentrarse en desarrollar aplicaciones web más rápido sin preocuparse por las cosas de configuración comunes requeridas.

Publicado anteriormente en https://www.tutorialfunda.com/reactjs/setup-react-js-project-with-next-js-vs-code/