Siguiente.js Introducción

Next.js es un marco basado en reacciones. Tiene poderes para desarrollar hermosas aplicaciones web para diferentes plataformas como Windows, Linux y Mac. Si tiene poca experiencia en reaccionar y espera saber más sobre el ecosistema de reacción, entonces debe tener conocimiento sobre el marco Next.js.
Hagamos una breve introducción sobre Next.js.

Introducción: Next.js se basa en react, webpack y babel. Es una herramienta increíble para crear aplicaciones web y es famosa por la representación del lado del servidor. Next.js está construido por Zeit . Los desarrolladores con conocimientos de HTML, CSS, Java Script y React pueden aprender y cambiar fácilmente a next.js.

Principales características:

• Hot Code Reloading: recarga automáticamente la aplicación cuando se guardan los cambios en el código.
• División automática de código: con esta función, cada importación en el código se empaqueta y se sirve con cada página. Significa que el código innecesario nunca se carga en la página.
• Compatibilidad con el ecosistema: compatible con JavaScript, Node y react.
• Representación del servidor: renderice fácilmente el componente de reacción en el servidor antes de enviar HTML al cliente.
• Styled-JSX: Styled-JSX le permite escribir CSS directamente dentro del código JavaScript.

Ejemplo:

function Home() {
    return (
        <div className="container">
        <p>Hello Geeks</p>
        <style jsx>{`
            .container {
                margin: 50px;
            }
            p {
                color: blue;
            }
        `}</style>
        </div>
    )
}
  
export default Home

Pasos para instalar y ejecutar la aplicación Next.js:

• Paso 1: la instalación de next.js requiere npm y node.js. Puede instalar node.js desde aquí . Confirme la instalación ejecutando estos comandos en la terminal.

  node -v
  npm -v

• 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"   } }

  Para ejecutar la aplicación en el navegador, use el comando npm starten la terminal.

• Paso 3: agregue un archivo index.js en la carpeta de la página y agregue el siguiente código dentro de él.

  import React from'react'; import Link from'next/link';    export default class extends React.Component {     render() {         return ( {                    // This is Jsx contains HTML         // code in Javascript}         <div>             <h1>Hello Geeks</h1>             {                 // This is Styled-jsx contains                 // CSS code in Javascript}                 <style jsx>{`                     a{                         color:grey;                         text-decoration:none;                     }                 `}</style>             }         </div>         )     }   }

• Paso 4: Ahora inicie la aplicación ejecutando npm start.
  

  Producción:
  

Referencia: https://nextjs.org/docs/getting-started