Instalaci贸n de Next.js

Next.js se basa en reaccionar, paquete web y babel. Es una herramienta incre铆ble para crear aplicaciones web y es famosa por su renderizado del lado del servidor. Los desarrolladores con conocimientos de HTML, CSS, JavaScript y React pueden aprender y cambiar f谩cilmente a next.js.

Instalaci贸n de Next.js: a continuaci贸n se muestra el procedimiento paso a paso para instalar next.js.

Paso 1: Instale NodeJS. Sigue uno de los enlaces para instalar seg煤n tu sistema, Windows 聽 Linux .

Paso 2: ahora cree una carpeta para su proyecto en el escritorio, navegue hasta la carpeta a trav茅s de su editor de c贸digo y ejecute el siguiente comando en la terminal.

npm init -y
npm install --save next react react-dom

Despu茅s de este paso, ya tenemos todas las dependencias instaladas en nuestro sistema. Ahora agregue el siguiente script en el archivo package.json.

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

Esta ser铆a la estructura de carpetas despu茅s de la instalaci贸n,

Paso 3: Ejecute la aplicaci贸n

Escriba el siguiente comando para ejecutar la aplicaci贸n NextJS y luego abra la URL en el navegador.

npm run dev

Despu茅s de la ejecuci贸n exitosa, la p谩gina predeterminada de next.js se mostrar谩 en el navegador.

Entendamos el funcionamiento a trav茅s de un ejemplo.

Ejemplo 1: En este ejemplo, simplemente imprimiremos Hola. El archivo index.js es el punto de entrada principal de la aplicaci贸n next.js, lo que significa que el componente exportado de forma predeterminada por el archivo index.js se representa en la pantalla, por lo que tenemos que cambiar dentro de este archivo para mostrar hola mundo en la pantalla. .

export default function Home() {
聽聽return (
聽聽聽聽<div>
聽聽聽聽聽聽Hello, GeeksforGeeks Learner!!
聽聽聽聽</div>
聽聽)
}

Producci贸n:

Ejemplo 2: Ejemplo basado en Pages.NextJS proporciona una caracter铆stica impresionante de p谩ginas, lo que significa que puede crear cualquier componente igual que ReactJS y luego almacenarlo dentro de un directorio llamado p谩ginas. M谩s tarde, cada vez que alguien visite la ruta /componente , el componente se renderizar谩. Puede ver claramente lo que est谩 pasando aqu铆, estamos creando enrutamiento sin ning煤n esfuerzo adicional.
Estructura del proyecto: vamos a crear tres componentes aqu铆, esta ser谩 la estructura de carpetas.

Dentro del componente funcional, hay un div al inicio que contiene algo de texto y texto en negrita dentro de la etiqueta b.

function Page1() {
聽聽聽聽return <div>This is page1, accessed from the route <b>/page1</b> </div>
聽聽}
聽聽聽聽
export default Page1;

function Page2() {
聽聽聽聽return <div>This is page2, accessed from the route <b>/page2</b></div>
聽聽}
聽聽聽聽
export default Page2;

Cree este archivo dentro del directorio p谩gina din谩mica (digamos) y el componente se representar谩 en la ruta /p谩gina din谩mica/[id] donde [] indica el marcador de posici贸n. El objeto de enrutador devuelto por el enlace useRouter proporciona un atributo asPath que contiene la ruta de la URL solicitada a la que estamos accediendo dentro de la etiqueta b.

import { useRouter } from "next/router"
聽聽
function DynamicPage() {
聽聽聽聽const router = useRouter();
聽聽聽聽return <div>This is Dynamic Page, accessed from聽
聽聽聽聽聽聽聽聽聽聽聽the route <b>{router.asPath}</b> </div>
}
聽聽聽聽
export default DynamicPage

Finalmente, aqu铆 hemos combinado las tres p谩ginas dentro del punto de entrada de la aplicaci贸n next.js

export default function Home() {
聽聽return <div>This is HomePage
聽聽聽聽<p>
聽聽聽聽聽聽聽Click on this <a href='/page1'><u>Link</u></a> to Go聽
聽聽聽聽聽聽聽<b>/page1</b>
聽聽聽聽聽聽聽Route
聽聽聽聽</p>
聽聽
聽聽聽聽<p>
聽聽聽聽聽聽聽聽Click on this <a href='/page2'><u>Link</u></a> to Go聽
聽聽聽聽聽聽聽聽<b>/page2</b> Route
聽聽聽聽</p>
聽聽
聽聽</div>
}

Producci贸n: