Saltar al contenido

El lado de servidor de representación en Reaccionar usando NextJSNov, 25thIn este tutorial, vamos a aprender acerca de lo que está del lado del servidor …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de lo que es representación del lado del servidor y cómo construir del lado del servidor hacía reaccionar aplicaciones mediante el uso de next.js.

¿Cuál es el lado del servidor de representación? aplicaciones Page

En individuales como reaccionar o angulares o vue enviamos un único archivo HTML sin contenido y generar el formato HTML completa en el navegador del cliente mediante la descarga de los archivos JavaScript y ejecutado en el navegador.

del lado del servidor de representación significa la (HTML) marcado de que estamos enviando al cliente se genera en el servidor en lugar de en el navegador del cliente.

Usos del lado del servidor prestando aplicaciones del lado del servidor

  • son mejores para el SEO.
  • tiempo más rápido de carga de página.
  • Bueno para compartir los medios de comunicación social.

¿Cuál es Nextjs?

Next.js es un reaccionan marco que se utiliza para construir el lado del servidor prestado reaccionar aplicaciones.

Introducción a Nextjs

vamos a instalar los siguientes paquetes ejecutando el siguiente comandos.

# create a new directory
mkdir nextjs-app

# changing the directory
cd nextjs-app

# Initializing the new package.json file
npm init -y

# installing the packages

npm i next react react-dom

vez que se instala correctamente los paquetes de ahora abrir el archivo presente en el interior package.json carpeta yournextjs aplicación y añadir el siguiente guiones.

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

Creación de páginas en nextjs

In nextjs, necesitamos crear unas páginas de carpetas y añadir las páginas necesarias para nuestra aplicación en esa carpeta de modo thatnextjs se creará automáticamente el enrutamiento para nuestra aplicación reaccionan.

crear una nueva carpeta llamada páginas en su nextjs aplicación.

Dentro de las páginas, carpeta de crear un nuevo archivo llamado index.js y añadir el siguiente código.

import React from 'react'

function IndexPage() {
return (

Hello Next.js

)
}

export default IndexPage;

Ahora abra su carrera NPM dev terminal y ejecute para encender el servidor de desarrollo nextjs.

Vamos a crear dos páginas más.

crear un archivo contact.js en sus páginas de carpetas y añada el siguiente código.

import React from 'react';

function ContactPage() {
return (

This is Contact Page

)
}
export default ContactPage;

crear un archivo posts.js en sus páginas de carpetas y añadir el siguiente código.

import React from 'react';

function Posts() {
return (

  • My first post
  • My second post

)
}
export default Posts;

Ahora abra su navegador y escriba manualmente localhost: 3000 / contacto verá una página de contacto se representa en la pantalla.


Home
Posts
Contact
<
av>
)

}
export default NavBar;

En barra de navegación nos importó componente Enlace de la nextjs / enlace. componente

Enlace acepta el puntal href para especificar la ruta de la que necesitamos para navegar.

Abrir el archivo de index.js y añadir el componente barra de navegación.

import React from 'react'
import NavBar from '../components
avbar';

function IndexPage() {
return (


Hello Next.js

)
}
export default IndexPage;

Ahora podemos ver nuestra aplicación con una barra de navegación.




)
}

export default Seo;

Aquí nos importó el componente principal de la ‘siguiente / cabeza’ y pasamos nuestras etiquetas meta como childrento el componente principal. el uso de

Let nuestro componente Seo dentro del archivo index.js.

import React from 'react';
import Router from 'next/router'
import NavBar from '../components
avbar';
import Seo from '../components/seo'

function IndexPage() {
return (


Hello Next.js

)
}

export default IndexPage;

Ahora si navega a localhost: 3000 se puede ver nuestro título se cambia a la página de inicio.