Next.js - Guía rápida

Next.js es un marco basado en React con capacidad de renderización del lado del servidor. Es muy rápido y compatible con SEO.

Con Next.js, puede crear una aplicación robusta basada en reacciones con bastante facilidad y probarlas. A continuación se muestran las características clave de Next.js.

  • Hot Code Reload - El servidor Next.js detecta archivos modificados y los vuelve a cargar automáticamente.

  • Automatic Routing- No es necesario configurar ninguna URL para el enrutamiento. los archivos deben colocarse en la carpeta de páginas. Todas las URL se asignarán al sistema de archivos. Se puede personalizar.

  • Component specific styles - styled-jsx proporciona soporte tanto para estilos globales como específicos de componentes.

  • Server side rendering - Los componentes de reacción se procesan previamente en el servidor, por lo que se cargan más rápido en el cliente.

  • Node Ecosystem - Next.js está basado en reacciones geles bien con el ecosistema Node.

  • Automatic code split- Next.js procesa las páginas con las bibliotecas que necesitan. Next.js en lugar de crear un solo archivo grande de JavaScript, crea múltiples recursos. Cuando se carga una página, solo se carga la página javascript requerida.

  • Prefetch - Next.js proporciona un componente de enlace que se utiliza para vincular varios componentes y admite una propiedad de captación previa para captar recursos de la página en segundo plano.

  • Dynamic Components - Next.js permite importar módulos JavaScript y componentes React de forma dinámica.

  • Export Static Site - Next.js permite exportar un sitio estático completo desde su aplicación web.

  • Built-in Typescript Support - Next.js está escrito en TypeScript y proporciona un excelente soporte de TypeScript.

Como Next.js es un marco basado en reacciones, estamos utilizando el entorno Node. Ahora asegúrate de tenerNode.js y npminstalado en su sistema. Puede usar el siguiente comando para instalar Next.js:

npm install next react react-dom

Puede observar el siguiente resultado una vez que Next.js se haya instalado correctamente:

+ [email protected]
+ [email protected]
+ [email protected]
added 831 packages from 323 contributors and audited 834 packages in 172.989s

Ahora, creemos un paquete de nodo.json -

npm init

Seleccione los valores predeterminados al crear un package.json -

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (nextjs)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to \Node\nextjs\package.json:
{
   "name": "nextjs",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "dependencies": {
      "next": "^9.4.4",
      "react": "^16.13.1",
      "react-dom": "^16.13.1"
   },
   "devDependencies": {},
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC"
}
Is this OK? (yes)

Ahora actualice la sección de scripts de package.json para incluir comandos de Next.js.

{
   "name": "nextjs",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "dependencies": {
      "next": "^9.4.4",
      "react": "^16.13.1",
      "react-dom": "^16.13.1"
   },
   "devDependencies": {},
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "dev": "next",
      "build": "next build",
      "start": "next start"
   },
   "author": "",
   "license": "ISC"
}

Crear directorio de páginas.

Cree una carpeta de páginas dentro de la carpeta nextjs y cree un archivo index.js con el siguiente contenido.

function HomePage() {
   return <div>Welcome to Next.js!</div>
}

export default HomePage

Inicie el servidor Next.js

Ejecute el siguiente comando para iniciar el servidor:

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Verificar salida

Abra localhost: 3000 en un navegador y verá el siguiente resultado.

En Next.js, podemos crear páginas y navegar entre ellas usando la función de enrutamiento del sistema de archivos. UsaremosLink componente para tener una navegación del lado del cliente entre páginas.

En Next.js, una página es un componente de React y se exporta desde el directorio de páginas. Cada página está asociada con una ruta según su nombre de archivo. Por ejemplo

  • pages/index.js está vinculado con la ruta '/'.

  • pages/posts/first.js está vinculado con la ruta '/ posts / first' y así sucesivamente.

Actualicemos el proyecto nextjs creado en el capítulo Configuración del entorno .

Cree el directorio de publicaciones y first.js dentro de él con los siguientes contenidos.

export default function FirstPost() {
   return <h1>My First Post</h1>
}

Agregue soporte de enlace para volver a la página de inicio. Actualice first.js de la siguiente manera:

import Link from 'next/link'

export default function FirstPost() {
   return (
      <>
         <h1>My First Post</h1>
         <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
         </h2>
      </>	  
   )
}

Agregue Link Support a la página de inicio para navegar a la primera página. Actualice index.js de la siguiente manera:

import Link from 'next/link'

function HomePage() {
   return (
      <>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
      </>	    
   )
}

export default HomePage

Inicie el servidor Next.js

Ejecute el siguiente comando para iniciar el servidor:

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Verificar salida

Abra localhost: 3000 en un navegador y verá el siguiente resultado.

Haga clic en First Link y verá el siguiente resultado.

En Next.js, podemos servir páginas estáticas como imágenes muy fácilmente colocándolas en public, un directorio de nivel superior. Podemos referir estos archivos de manera similar a las páginas depages directorio.

En Next.js, una página es un componente de React y se exporta desde el directorio de páginas. Cada página está asociada con una ruta en función de su nombre de archivo.

Actualicemos el proyecto nextjs usado en el capítulo de Pages .

Cree un directorio público y coloque las imágenes dentro de él. Hemos tomado logo.png, imagen del logo TutorialsPoint.

Actualice first.js de la siguiente manera:

import Link from 'next/link'

export default function FirstPost() {
   return (
      <>
         <h1>My First Post</h1>
         <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
         </h2>
         <br/">
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	  
   )
}

Aquí hemos agregado una referencia a logo.png en el archivo index.js.

Inicie el servidor Next.js

Ejecute el siguiente comando para iniciar el servidor:

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Verificar salida

Abra localhost: 3000 en un navegador y verá el siguiente resultado.

El directorio público también es útil en caso de fines de SEO. Se puede utilizar para robot.txt, verificación del sitio de Google o cualquier otro activo estático en la aplicación web.

En Next.js, podemos modificar la sección de cabecera de cada página de reacción muy fácilmente con la ayuda de <Head> Reaccionar componente que está incorporado.

Actualicemos el proyecto nextjs usado en el capítulo de Pages .

Actualice index.js de la siguiente manera: 

import Link from 'next/link'
import Head from 'next/head'

function HomePage() {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
         <br/>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export default HomePage

Actualice first.js de la siguiente manera:

import Link from 'next/link'
import Head from 'next/head'

export default function FirstPost() {
   return (
      <>
      <Head>
         <title>My First Post</title>
      </Head>
      <h1>My First Post</h1>
      <h2>
         <Link href="/">
            <a>Home</a>
         </Link>
      </h2>
      </>	  
   )
}

Aquí hemos agregado una referencia a logo.png en el archivo index.js.

Inicie el servidor Next.js

Ejecute el siguiente comando para iniciar el servidor:

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Verificar salida

Abra localhost: 3000 en un navegador y verá el siguiente resultado.

Haga clic en el enlace Primera página y verifique que el título haya cambiado también en la página Primera publicación.

En Next.js, podemos usar la biblioteca inbuild css-in-js llamada styled-jsx. Permite escribir CSS dentro de un componente de reacción y estos estilos se aplicarán al componente.

En este ejemplo, crearemos un objeto Container que se utilizará para diseñar otros componentes al contenerlos.

La actualización de dejar que el nextjs proyecto utilizó en Meta Data capítulo.

Primero cree un directorio de Componentes en el nivel raíz y agregue un archivo container.module.css de la siguiente manera:

.container {
   max-width: 36rem;
   padding: 0 1rem;
   margin: 3rem auto 6rem;
   border: 1px solid red;  
}

Cree el archivo container.js en el directorio de componentes

import styles from './container.module.css'

function Container({ children }) {
   return <div className={styles.container}>{children}</div>
}

export default Container

Ahora use el componente Container en first.js.

import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost() {
   return (
      <>
         <Container>
            <Head>
               <title>My First Post</title>
            </Head>
            <h1>My First Post</h1>
            <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
            </h2>
         </Container>
      </>	  
   )
}

Inicie el servidor Next.js

Ejecute el siguiente comando para iniciar el servidor:

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Verificar salida

Abra localhost: 3000 en un navegador y vaya a la primera publicación, verá el siguiente resultado.

En Next.js, creemos estilos globales que se aplicarán en todas las páginas.

En este ejemplo, crearemos un styles.css que se usará en todos los componentes usando el componente _app.js.

Actualicemos el proyecto nextjs utilizado en el capítulo de soporte de CSS .

Primero cree un directorio de estilos en el nivel raíz y agregue un archivo styles.css de la siguiente manera:

html,
body {
   padding: 0;
   margin: 0;
   line-height: 1.6;
   font-size: 18px;
   background-color: lime;
}

* {
   box-sizing: border-box;
}

a {
   color: #0070f3;
   text-decoration: none;
}

a:hover {
   text-decoration: underline;
}

img {
   max-width: 100%;
   display: block;
}

Cree el archivo _app.js en el directorio de páginas

import '../styles/styles.css'

export default function App({ Component, pageProps }) {
   return <Component {...pageProps} />
}

Inicie el servidor Next.js

Ejecute el siguiente comando para iniciar el servidor:

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Verificar salida

Abra localhost: 3000 en un navegador y verá el siguiente resultado.

Haga clic en el enlace Primera publicación.

En Next.js, sabemos que genera HTML para una página denominada renderización previa. Next.JS admite dos tipos de renderizado previo.

  • Static Generation- Este método genera la página HTML en el momento de la compilación. Este HTML pre-renderizado se envía en cada solicitud. Este método es útil para sitios web de marketing, blogs, productos de comercio electrónico que enumeran sitios web, ayudas y sitios web de documentación.

  • Server Side Generation- Este método genera la página HTML en cada solicitud. Este método es adecuado cuando el contenido de una página html puede variar con cada solicitud.

Procesamiento previo por página

Next.JS permite establecer un método de representación previa para cada página donde la mayoría de las páginas siguen la generación estática y otras páginas utilizarán la representación del lado del servidor.

Generación estática sin datos

La generación estática se puede realizar sin datos, en cuyo caso, las páginas HTML estarán listas sin necesidad de obtener previamente los datos y luego comenzar a renderizar. Los datos se pueden recuperar más tarde o bajo pedido. Esta técnica ayuda a mostrar al usuario una interfaz de usuario sin ningún dato en caso de que los datos tarden en llegar.

Generación estática con datos

La generación estática se puede realizar con datos, en cuyo caso, las páginas HTML no estarán listas hasta que se obtengan los datos, ya que HTML puede depender de los datos. Cada componente tiene un método especialgetStaticProps que se puede usar para obtener datos y pasar datos como accesorios de la página para que la página pueda representar acordes a los accesorios pasados.

La función getStaticProps () se ejecuta en el momento de la compilación en producción y se ejecuta para cada solicitud en el modo de desarrollo.

Creemos un ejemplo para demostrar lo mismo.

En este ejemplo, crearemos una página de actualización index.js y first.js para que un servidor acceda a obtener datos.

Actualicemos el proyecto nextjs utilizado en el capítulo Soporte global de CSS .

Actualice el archivo index.js en el directorio de páginas para usar el método getServerSideProps (). Este método se llamará por solicitud.

import Link from 'next/link'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

Actualice el archivo first.js en el directorio de páginas para usar el método getStaticProps (). Este método se llamará una vez.

import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost(props) {
   return (
      <>
         <Container>
            <Head>
               <title>My First Post</title>
            </Head>
            <h1>My First Post</h1>
            <h2>
               <Link href="/">
                  <a>Home</a>
               </Link>
               <div>Next stars: {props.stars}</div>
            </h2>
         </Container>
      </>	  
   )
}

export async function getStaticProps() {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

Inicie el servidor Next.js

Ejecute el siguiente comando para iniciar el servidor:

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Verificar salida

Abra localhost: 3000 en un navegador y verá el siguiente resultado.

Haga clic en el enlace Primera publicación.

Next.js usa un enrutador basado en el sistema de archivos. Siempre que agreguemos una página apagesdirectorio, está automáticamente disponible a través de url. Las siguientes son las reglas de este enrutador.

  • Index Routes- Un archivo index.js presente en una carpeta se asigna a la raíz del directorio. Por ejemplo

    • pages / index.js se asigna a '/'.

    • pages / posts / index.js se asigna a '/ posts'.

  • Nested Routes- Cualquier estructura de carpetas anidadas en el directorio de páginas porque la URL del enrutador automáticamente. Por ejemplo

    • pages / settings / dashboard / about.js se asigna a '/ settings / dashboard / about'.

    • pages / posts / first.js se asigna a '/ posts / first'.

  • Dynamic Routes- Podemos usar el parámetro con nombre también para hacer coincidir la URL. Use corchetes para lo mismo. Por ejemplo

    • pages / posts / [id] .js se asigna a '/ posts /: id' donde podemos usar URL como '/ posts / 1'.

    • pages / [usuario] /settings.js se asigna a '/ posts /: user / settings' donde podemos usar URL como '/ abc / settings'.

    • pages / posts / [... all] .js se asigna a '/ posts / *' donde podemos usar cualquier URL como '/ posts / 2020 / jun /'.

Vinculación de página

Next.JS permite vincular páginas en el lado del cliente utilizando el componente Link react. Tiene las siguientes propiedades:

  • href- nombre de la página en el directorio de páginas. Por ejemplo/posts/first que se refiere a first.js presente en el directorio pages / posts.

Creemos un ejemplo para demostrar lo mismo.

En este ejemplo, actualizaremos index.js y la página first.js para que un servidor acceda a obtener datos.

Actualicemos el proyecto nextjs utilizado en el capítulo Soporte global de CSS .

Actualice el archivo index.js en el directorio de páginas de la siguiente manera.

import Link from 'next/link'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first">> <a>First Post</a></Link>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

Inicie el servidor Next.js

Ejecute el siguiente comando para iniciar el servidor:

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Verificar salida

Abra localhost: 3000 en un navegador y verá el siguiente resultado.

Haga clic en el enlace Primera publicación.

En Next.js, podemos crear rutas de forma dinámica. En este ejemplo, crearemos páginas sobre la marcha y su enrutamiento.

  • Step 1. Define [id].js file- [id] .js representa la página dinámica donde id será la ruta relativa. Defina este archivo en el directorio pages / post.

  • Step 2. Define lib/posts.js- posts.js representa los identificadores y el contenido. El directorio lib se creará en el directorio raíz.

[id] .js

Actualice el archivo [id] .js con el método getStaticPaths () que establece las rutas y el método getStaticProps () para obtener el contenido según el id.

import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'

import { getAllPostIds, getPostData } from '../../lib/posts'

export default function Post({ postData }) {
   return (
      <Container>
         {postData.id}
         <br />
         {postData.title}
         <br />
         {postData.date}
      </Container>
   )
}
export async function getStaticPaths() {
   const paths = getAllPostIds()
   return {
      paths,
      fallback: false
   }
}

export async function getStaticProps({ params }) {
   const postData = getPostData(params.id)
      return {
      props: {
         postData
      }
   }
}

posts.js

posts.js contiene getAllPostIds () para obtener los identificadores y getPostData () para obtener los contenidos correspondientes.

export function getPostData(id) {
   const postOne = {
      title: 'One',
      id: 1,
      date: '7/12/2020'
   }

   const postTwo = {
      title: 'Two',
      id: 2,
      date: '7/12/2020'
   }
   if(id == 'one'){
      return postOne;
   }else if(id == 'two'){
      return postTwo;
   }  
}

export function getAllPostIds() {
   return [{
      params: {
         id: 'one'
      }
   },
   {
      params: {
         id: 'two'
      }
   }
];
}

Inicie el servidor Next.js

Ejecute el siguiente comando para iniciar el servidor:

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Verificar salida

Abra localhost: 3000 / posts / one en un navegador y verá el siguiente resultado.

Abra localhost: 3000 / posts / two en un navegador y verá el siguiente resultado.

En Next.js, hasta ahora estamos usando el componente Link react para navegar de una página a otra. También hay una forma programática de lograr lo mismo utilizando el componente Router. Generalmente, el componente Router se usa con etiquetas html.

Actualice el archivo index.js en el directorio de páginas de la siguiente manera.

import Router from 'next/router'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <span onClick={() => Router.push('/posts/one')}>First Post</span>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

Inicie el servidor Next.js

Ejecute el siguiente comando para iniciar el servidor:

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Verificar salida

Abra localhost: 3000 en un navegador y verá el siguiente resultado.

Haga clic en Primera publicación, que no es un enlace, pero se puede hacer clic.

En Next.js, el enrutamiento superficial se refiere a navegar a la misma página pero sin llamadas a los métodos getServerSideProps, getStaticProps y getInitialProps.

Para hacer un enrutamiento superficial, usamos el enrutador con el indicador superficial como verdadero. Vea el siguiente ejemplo.

Actualice el archivo index.js en el directorio de páginas de la siguiente manera.

import Router from 'next/router'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <span onClick={() => Router.push('/?counter=1', undefined, { shallow: true })}>Reload</span>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

Inicie el servidor Next.js

Ejecute el siguiente comando para iniciar el servidor:

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Verificar salida

Abra localhost: 3000 en un navegador y luego haga clic en el enlace Recargar y verá el siguiente resultado.

API Routes es una forma de crear una API de descanso utilizando Next.js. Next.js mapea cualquier archivo presente en/pages/apicarpeta y se tratará como punto final de la API. Un ejemplo de función API:

export default (req, res) => {
   ...
}

A continuación se presentan algunos puntos importantes a considerar.

  • req - req es una instancia de http.IncomingMessage y se usa para obtener datos de la solicitud.

  • res - res es una instancia de http.ServerResponse y se usa para enviar datos como respuesta.

Creemos un ejemplo para demostrar lo mismo.

En este ejemplo, vamos a crear un user.js en pages/api directorio.

Actualicemos el proyecto nextjs utilizado en el capítulo Soporte global de CSS .

Cree el archivo user.js en el directorio pages / api de la siguiente manera.

export default (req, res) => {
   res.statusCode = 200
   res.setHeader('Content-Type', 'application/json')
   res.end(JSON.stringify({ name: 'Robert' }))
}

Inicie el servidor Next.js

Ejecute el siguiente comando para iniciar el servidor:

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
event - build page: /api/user
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Verificar salida

Abra localhost: 3000 / api / user en un navegador y verá el siguiente resultado.

{"name":"Robert"}

Las rutas API en Next.JS tienen middlewares integrados que ayudan a analizar la solicitud entrante.

Los siguientes son los middlewares

  • req.cookies- objeto de cookies contiene las cookies enviadas por la solicitud. El valor predeterminado es {}.

  • req.query- el objeto de consulta contiene la cadena de consulta. El valor predeterminado es {}.

  • req.body- el objeto de consulta contiene el cuerpo de la solicitud analizado usando 'content-type'. El valor predeterminado es nulo.

Creemos un ejemplo para demostrar lo mismo.

En este ejemplo, vamos a actualizar un user.js en pages/api directorio.

Actualicemos el proyecto nextjs utilizado en el capítulo Rutas API .

Cree el archivo user.js en el directorio pages / api de la siguiente manera.

export default (req, res) => {
   res.statusCode = 200
   res.setHeader('Content-Type', 'application/json')
   res.end(JSON.stringify({ query: req.query }))
}

Inicie el servidor Next.js

Ejecute el siguiente comando para iniciar el servidor:

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
event - build page: /api/user
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Verificar salida

Abra http: // localhost: 3000 / api / user? Counter = 1 en un navegador y verá el siguiente resultado.

{"query":{"counter":"1"}}

res El objeto tiene express.js como métodos de ayuda para facilitar el desarrollo para crear servicios.

Los siguientes son los métodos auxiliares de respuesta

  • res.status(code)- Estos métodos establecen el estado de la respuesta. El código pasado debe ser un estado HTTP válido.

  • req.json(json): Este método devuelve una respuesta JSON. json pasado debe ser un objeto JSON válido.

  • req.send(body)- Este método envía una respuesta HTTP. La respuesta puede ser una cadena, un objeto o un búfer.

Creemos un ejemplo para demostrar lo mismo.

En este ejemplo, vamos a actualizar un user.js en pages/api directorio.

Actualicemos el proyecto nextjs utilizado en el capítulo Rutas API .

Cree el archivo user.js en el directorio pages / api de la siguiente manera.

export default (req, res) => {
   res.status(200).json({ name: 'Robert' });
}

Inicie el servidor Next.js

Ejecute el siguiente comando para iniciar el servidor:

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
event - build page: /api/user
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Verificar salida

Abra http: // localhost: 3000 / api / user en un navegador y verá el siguiente resultado.

{ name: 'Robert' }

Next.js, tiene un excelente soporte para mecanografiado. A continuación se muestran algunos pasos para habilitar la escritura mecanografiada en el proyecto.

Crea tsconfig.json

Cree tsconfig.json en el directorio raíz. Lo mantendremos vacío inicialmente. Ahora inicie el servidor.

Next.JS detectará tsconfig.json y mostrará el siguiente mensaje en la consola.

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
It looks like you're trying to use TypeScript but do not have the required package(s) installed.

Please install typescript, @types/react, and @types/node by running:

        npm install --save-dev typescript @types/react @types/node

If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files).
...

Instalar mecanografiado

Ejecute el comando npm install para instalar mecanografiado y bibliotecas relacionadas.

npm install --save-dev typescript @types/react @types/node
...

+ @types/[email protected]
+ @types/[email protected]
+ [email protected]
added 5 packages from 72 contributors and audited 839 packages in 27.538s
...

Inicie el servidor Next.js

Ejecute el siguiente comando para iniciar el servidor:

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
We detected TypeScript in your project and created a tsconfig.json file for you.


Your tsconfig.json has been populated with default values.

event - compiled successfully
wait  - compiling...
event - compiled successfully

Abra tsconfig.json

El servidor NextJS ha modificado tsconfig.json.

{
   "compilerOptions": {
      "target": "es5",
      "lib": [
         "dom",
         "dom.iterable",
         "esnext"
      ],
      "allowJs": true,
      "skipLibCheck": true,
      "strict": false,
      "forceConsistentCasingInFileNames": true,
      "noEmit": true,
      "esModuleInterop": true,
      "module": "esnext",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "jsx": "preserve"
   },
   "exclude": [
      "node_modules"
   ],
   "include": [
      "next-env.d.ts",
      "**/*.ts",
      "**/*.tsx"
   ]
}

Crear hello.ts

Cree hello.ts en el directorio pages / api que actuará como un servicio de descanso para nosotros.

import { NextApiRequest, NextApiResponse } from 'next'

export default (_: NextApiRequest, res: NextApiResponse) => {
   res.status(200).json({ text: 'Welcome to TutorialsPoint' })
}

Inicie el servidor Next.js

Ejecute el siguiente comando para iniciar el servidor:

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Verificar salida

Abra localhost: 3000 / api / hello en un navegador y verá el siguiente resultado.

{"text":"Welcome to TutorialsPoint"}

Next.js, tiene soporte para publicar variables de entorno en el nodo que podemos usar para conectarnos al servidor, base de datos, etc. Para esto, necesitamos crear un archivo .env.local en el directorio raíz. También podemos crear .env.production.

Crear .env.local

Cree .env.local en el directorio raíz con el siguiente contenido.

DB_HOST=localhost
DB_USER=tutorialspoint
DB_PASS=nextjs

Crea env.js

Cree una página llamada env.js con los siguientes contenidos en el directorio de páginas / publicaciones donde usaremos las variables de entorno usando process.env.

import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost(props) {
   return (
      <>
         <Container>
            <Head>
               <title>Environment Variables</title>
            </Head>
            <h1>Database Credentials</h1>
               <p>Host: {props.host}</p>
               <p>Username: {props.username}</p>
               <p>Password: {props.password}</p>
         </Container>
      </>	  
   )
}

export async function getStaticProps() {
   // Connect to Database using DB properties
   return {
      props: { 
         host: process.env.DB_HOST,
         username: process.env.DB_USER,
         password: process.env.DB_PASS
      }
   }
}

Ahora inicie el servidor.

Next.JS detectará .env.local y mostrará el siguiente mensaje en la consola.

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
wait  - compiling...
event - compiled successfully
event - build page: /posts/env
wait  - compiling...
event - compiled successfully

Verificar salida

Abra localhost: 3000 / posts / env en un navegador y verá el siguiente resultado.

Hasta ahora hemos desarrollado y ejecutado la aplicación NEXT.JS de muestra en modo dev, ahora haremos la implementación lista para producción localmente siguiendo los siguientes pasos.

  • npm run build - Construya la construcción lista para producción, altamente optimizada.

  • npm run start - Inicie el servidor.

La compilación lista para producción carece de mapas de origen y recarga de código activo en comparación con el modo de desarrollo, ya que esas características se utilizan principalmente en la depuración.

Preparar construir

Ejecute el siguiente comando para preparar la compilación lista para producción:.

npm run build

> [email protected] build \Node\nextjs
> next build

info  - Loaded env from \Node\nextjs\.env.local
Creating an optimized production build

Compiled successfully.

Automatically optimizing pages

Page                                                           Size     First Load JS
+ ? /                                                          2.25 kB        60.3 kB
+   /_app                                                      288 B          58.1 kB
+        /404                                                       3.25 kB   61.3 kB
+ ? /api/user
+ ? /posts/[id]                                                312 B          61.6 kB
+   + /posts/one
+   + /posts/two
+ ? /posts/env                                                 2.71 kB        60.8 kB
+ ? /posts/first                                               374 B          61.7 kB
+ First Load JS shared by all                                  58.1 kB
  + static/pages/_app.js                                       288 B
  + chunks/3458401054237127135bcd3ee8eb2a19d67af299.a1a019.js  10.5 kB
  + chunks/framework.c6faae.js                                 40 kB
  + runtime/main.60464f.js                                     6.54 kB
  + runtime/webpack.c21266.js                                  746 B
  + css/9706b5b8ed8e82c0fba0.css                               175 B

?  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
          (Static)  automatically rendered as static HTML (uses no initial props)
?  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

Inicie el servidor

Ejecute el siguiente comando para iniciar el servidor de producción:

npm run start

> [email protected] start \Node\nextjs
> next start

info  - Loaded env from \Node\nextjs\.env.local
ready - started server on http://localhost:3000

Verificar salida

Abra localhost: 3000 / api / user en un navegador y verá el siguiente resultado.

{"name":"Robert"}

NEXT.JS proporciona una CLI para iniciar, crear y exportar aplicaciones. Se puede invocar usando npx que viene de npm 5.2 en adelante.

Ayuda CLI

Para obtener una lista de los comandos de la CLI y obtener ayuda sobre ellos, escriba el siguiente comando.

npx next -h
   Usage
      $ next <command>

   Available commands
      build, start, export, dev, telemetry

   Options
      --version, -v   Version number
      --help, -h      Displays this message

   For more information run a command with the --help flag
      $ next build --help

Construir Construir listo para producción

Escriba el siguiente comando.

npx next build
info  - Loaded env from D:\Node\nextjs\.env.local
Creating an optimized production build

Compiled successfully.

Automatically optimizing pages

Page                                                           Size     First Load JS
+ ? /                                                          2.25 kB        60.3 kB
+   /_app                                                      288 B          58.1 kB
+        /404                                                       3.25 kB   61.3 kB
+ ? /api/user
+ ? /posts/[id]                                                312 B          61.6 kB
+   + /posts/one
+   + /posts/two
+ ? /posts/env                                                 2.71 kB        60.8 kB
+ ? /posts/first                                               374 B          61.7 kB
+ First Load JS shared by all                                  58.1 kB
  + static/pages/_app.js                                       288 B
  + chunks/ab55cb957ceed242a750c37a082143fb9d2f0cdf.a1a019.js  10.5 kB
  + chunks/framework.c6faae.js                                 40 kB
  + runtime/main.60464f.js                                     6.54 kB
  + runtime/webpack.c21266.js                                  746 B
  + css/9706b5b8ed8e82c0fba0.css                               175 B

?  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
          (Static)  automatically rendered as static HTML (uses no initial props)
?  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

Construir e iniciar el servidor de desarrollo

Escriba el siguiente comando.

npx next dev

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully

Inicie el servidor de producción

Escriba el siguiente comando.

npx next start

info  - Loaded env from \Node\nextjs\.env.local
ready - started server on http://localhost:3000