Nextjs para todos, con algunos conocimientos básicos de React

Con algunos conocimientos básicos de React y JavaScript, estará en camino

Next.js es un marco de JavaScript creado por Zeit. Le permite crear aplicaciones web estáticas y de renderización del lado del servidor utilizando React. Es una gran herramienta para construir su próximo sitio web. Tiene muchas características y ventajas excelentes, que pueden hacer de Nextjs su primera opción para crear su próxima aplicación web.

No necesita ninguna configuración de paquete web o similar para comenzar a usar Next.js. Viene con su configuración. Todo lo que necesita es ejecutar npm run devy comenzar a construir su aplicación.

En este artículo, vamos a explorar las excelentes características y trucos de Next.js, y cómo comenzar a construir su próximo sitio web con él.

Esta publicación asume que tienes algunos conocimientos básicos de React y JavaScript.

Aquí hay algunos sitios web excelentes creados con Next.js:

• Syntaxt.fm
• npmjs
• material-ui.io
• expo.io
• codemenitor.io

Incluso utilicé Nextjs para construir mi sitio web personal saidhayani.me; puedes obtener el código fuente en GitHub aquí.

Empezando con Next.js

Para comenzar con Next.js, debe tener node.js instalado en su máquina y eso es todo. Next.js es como cualquier otra aplicación de node.js: necesita npm o Yarn para instalar las dependencias.

Comencemos y creemos un proyecto Next.js.

Primero, necesitamos crear una carpeta y darle un nombre de nuestra elección. Voy a nombrarlo nextjs-app.

Puede hacerlo fácilmente con esta línea de comando:

mkdir nextjs-app

Después de crear la carpeta nextjs-app, ábrala en la terminal. Ejecutar npm init para crear el package.json archivo.

A continuación, tenemos que instalar nuestras dependencias.

Instalación de Next.js

• usando hilo, escriba

yarn add next

• usando npm, escriba:

npm i next --save

Luego tenemos que instalar React porque Next.js usa React. La primera línea a continuación utiliza Yarn para la instalación.

yarn add react react-dom

// with npm

npm i react react-dom --save

Después de eso, debe crear dos carpetas necesarias: pagesy static. ¡¡Next.js no funcionará sin ellos !!

mkdir pages static

Usted debe tener esta estructura después de ejecutar estos comandos:

nextjs-app -pages -static -package.json

Y luego simplemente puede ejecutar npm next devy luego abrir //localhost:3000/ en su navegador.

La NotFoundpágina aparecerá porque todavía no tenemos ninguna.

Así que creemos una homepágina y un punto de entrada index.js.

touch index.js home.js

Y luego puede escribir un componente React normal. Como dije anteriormente, Next.js es para crear aplicaciones React.

Así es home.jscomo se ve nuestro :

Y aquí está nuestro index.jsarchivo:

Next.js tiene una función de recarga en vivo. Todo lo que necesita hacer es cambiar y guardar, y Next.js compilará y volverá a cargar la aplicación automáticamente por usted.

Nota : Next.js es como cualquier otra herramienta de renderización del lado del servidor que necesitamos para definir la página predeterminada de nuestra aplicación, en nuestro caso es index.js.

Verá este cambio en el navegador después de ejecutar npm next dev:

¡Felicidades! Acabamos de crear una aplicación Next.js con unos sencillos pasos. Estas instrucciones para crear una aplicación Next.js se describen en los documentos oficiales de Next.js.

Mi alternativa

Normalmente no uso de esta forma. En su lugar, uso la CLI de create-next-app que hará todo esto por mí en una sola línea.

npx create-next-app my-app

Puede consultar la documentación aquí para explorar más funciones.

Crea configuraciones personalizadas para Next.js

A veces, es posible que desee agregar algunas dependencias o paquetes adicionales a su aplicación Next.js.

Next.js te da la opción de personalizar tu configuración usando un next-config.jsarchivo.

Por ejemplo, es posible que desee agregar soporte sass a su aplicación. En este caso, debe usar el paquete next-sass y debe agregarlo al next-config.jsarchivo como en el siguiente ejemplo:

Primero, instale next-sass:

yarn add @zeit/next-sass

Luego inclúyelo dentro del next-config.jsarchivo:

Y luego puede crear, escribir su código sass e importarlo en su componente:

Importando el archivo sass en nuestro componente:

Y aqui esta el resultado:

Vaya, ¿no fue tan fácil agregar soporte sass a nuestra aplicación Next.js?

En este punto, solo cubrimos la parte de instalación y configuración. ¡Ahora hablemos de las características de Next.js!

Las características

Next.js viene con un montón de excelentes características como renderizado del lado del servidor, enrutadores y carga diferida.

Representación del lado del servidor

Next.js realiza la renderización del lado del servidor de forma predeterminada. Esto hace que su aplicación esté optimizada para los motores de búsqueda. Además, puede integrar cualquier middleware como express.js o Hapi.js, y puede ejecutar cualquier base de datos como MongoDB o MySQL.

Hablando de optimización de motores de búsqueda, Next.js viene con un Headcomponente que le permite agregar y crear metaetiquetas dinámicas. Es mi característica favorita: puedes crear metaetiquetas dinámicas y personalizadas. Estos hacen que su sitio web pueda ser indexado por motores de búsqueda como Google. A continuación, se muestra un ejemplo de un Headcomponente:

Y puede importar y usar el Headcomponente en cualquier otra página:

¡Increíble!

Nota : Con Next.js no necesita importar React porque Next.js lo hace por usted.

Generando un sitio web estático con Next.js

Además de la representación del lado del servidor, aún puede compilar y exportar su aplicación como un sitio web estático HTML e implementarla en un alojamiento de sitios web estáticos como una página de GitHub o netlify. Puede obtener más información sobre cómo crear un sitio web estático con Next.js aquí en los documentos oficiales.

Enrutadores

Esta es otra de las grandes características de Next.js. Cuando usa la aplicación create-react-app, generalmente necesita instalar react-router y crear su configuración personalizada.

Next.js viene con sus propios enrutadores sin configuraciones. No necesita ninguna configuración adicional de sus enrutadores. Simplemente cree su página dentro de la pagescarpeta y Next.js se encargará de toda la configuración del enrutamiento.

¡Sigamos adelante y creemos una navegación personalizada para dejar todo en claro!

Para navegar entre páginas, Next.js tiene el Linkmétodo para administrar la navegación.

Creemos blog.jsy contact.jspáginas:

blog.js

Y aquí está la contact.jspágina:

¿Y ahora debemos poder navegar entre esas páginas?

Vaya, eso es tan fácil y súper asombroso.

Carga lenta

La carga diferida hace que su aplicación brinde una mejor experiencia de usuario. A veces, la página puede tardar en cargarse. El usuario puede abandonar su aplicación si la carga tarda más de 30 segundos.

La forma de evitar esto es usar algún truco para indicar al usuario que la página se está cargando, por ejemplo, mostrando una ruleta. La carga diferida o la división de código es una de las características que le permite lidiar y controlar la carga lenta para que solo cargue el código necesario en su página.

Next.js viene con su propio método de división de código. Nos proporciona un método, llamado dynamic, para cargar nuestro componente, como en el siguiente ejemplo:

Puede encontrar el código fuente de estos ejemplos en GitHub

Eso es todo. Espero que sea suficiente y espero que este artículo te dé una idea clara sobre Next.js y sus características. Puede obtener más información sobre otras funciones en los documentos oficiales.

Si tiene otras adiciones a esta publicación, puede dejar un comentario a continuación y si le gusta esta publicación, presione aplaudir. y compartir.

¿Discutir en Twitter ?.

Por cierto, recientemente trabajé con un grupo sólido de ingenieros de software para una de mis aplicaciones móviles. La organización fue excelente y el producto se entregó muy rápido, mucho más rápido que otras empresas y autónomos con los que he trabajado, y creo que puedo recomendarlos honestamente para otros proyectos. Envíeme un correo electrónico si desea ponerse en contacto: [email protected]