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: