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 -ySe 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 devPuedes 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/
