Next.js - Guida rapida

Next.js è un framework basato su React con capacità di rendering lato server. È molto veloce e SEO friendly.

Usando Next.js, puoi creare un'applicazione robusta basata sulla reazione abbastanza facilmente e testarla. Di seguito sono riportate le caratteristiche principali di Next.js.

• Hot Code Reload - Il server Next.js rileva i file modificati e li ricarica automaticamente.

• Automatic Routing- Non è necessario configurare alcun URL per il routing. i file devono essere inseriti nella cartella delle pagine. Tutti gli URL verranno mappati sul file system. La personalizzazione può essere eseguita.

• Component specific styles - styled-jsx fornisce supporto per stili globali e specifici per i componenti.

• Server side rendering - I componenti reattivi vengono pre-renderizzati sul server, quindi vengono caricati più velocemente sul client.

• Node Ecosystem - Next.js reagisce bene ai gel con l'ecosistema Node.

• Automatic code split- Next.js esegue il rendering delle pagine con le librerie di cui hanno bisogno. Next.js invece di creare un unico file javascript di grandi dimensioni, crea più risorse. Quando una pagina viene caricata, viene caricata solo la pagina javascript richiesta.

• Prefetch - Next.js fornisce il componente Link che viene utilizzato per collegare più componenti e supporta una proprietà di precaricamento per precaricare le risorse della pagina in background.

• Dynamic Components - Next.js consente di importare dinamicamente moduli JavaScript e componenti React.

• Export Static Site - Next.js consente di esportare il sito statico completo dalla tua applicazione web.

• Built-in Typescript Support - Next.js è scritto in Typescripts e fornisce un eccellente supporto Typescript.

Poiché Next.js è un framework basato su React, stiamo usando l'ambiente Node. Ora assicurati di averlo fattoNode.js e npminstallato sul tuo sistema. È possibile utilizzare il seguente comando per installare Next.js:

npm install next react react-dom

È possibile osservare il seguente output una volta installato con successo Next.js:

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

Ora creiamo un nodo package.json -

npm init

Seleziona i valori predefiniti durante la creazione di 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)

Ora aggiorna la sezione degli script di package.json per includere i comandi 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"
}

Crea directory di pagine.

Crea una cartella di pagine all'interno della cartella nextjs e crea un file index.js con i seguenti contenuti.

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

export default HomePage

Avvia Next.js Server

Eseguire il comando seguente per avviare il server -.

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

Verifica output

Apri localhost: 3000 in un browser e vedrai il seguente output.

In Next.js, possiamo creare pagine e navigare tra di loro utilizzando la funzionalità di instradamento del file system. UseremoLink componente per avere una navigazione lato client tra le pagine.

In Next.js, una pagina è un componente React e viene esportata dalla directory delle pagine. Ogni pagina è associata a un percorso in base al nome del file. Per esempio

• pages/index.js è collegato con il percorso "/".

• pages/posts/first.js è collegato con il percorso "/ posts / first" e così via.

Aggiorniamo il progetto nextjs creato nel capitolo Configurazione dell'ambiente .

Crea la directory dei post e first.js al suo interno con i seguenti contenuti.

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

Aggiungi supporto link per tornare alla home page. Aggiorna first.js come segue:

import Link from 'next/link'

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

Aggiungi supporto link alla home page per passare alla prima pagina. Aggiorna index.js come segue:

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

Avvia Next.js Server

Eseguire il comando seguente per avviare il server -.

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

Verifica output

Apri localhost: 3000 in un browser e vedrai il seguente output.

Fare clic su Primo collegamento e verrà visualizzato il seguente output.

In Next.js, possiamo servire pagine statiche come immagini molto facilmente inserendole public, una directory di primo livello. Possiamo fare riferimento a questi file in modo simile come le pagine inpages directory.

In Next.js, una pagina è un componente React e viene esportata dalla directory delle pagine. Ogni pagina è associata a un percorso in base al nome del file.

Aggiorniamo il progetto nextjs utilizzato nel capitolo Pages .

Crea una directory pubblica e inserisci le immagini al suo interno. Abbiamo preso logo.png, l'immagine del logo TutorialsPoint.

Aggiorna first.js come segue:

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" />
      </>	  
   )
}

Qui abbiamo aggiunto un riferimento a logo.png nel file index.js.

Avvia Next.js Server

Eseguire il comando seguente per avviare il server -.

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

Verifica output

Apri localhost: 3000 in un browser e vedrai il seguente output.

public directory è utile anche in caso di finalità SEO. Può essere utilizzato per robot.txt, verifica di Google Site o qualsiasi altra risorsa statica nell'applicazione web.

In Next.js, possiamo modificare la sezione head di ciascuna pagina di reazione molto facilmente con l'aiuto di <Head> reagire componente che è integrato.

Aggiorniamo il progetto nextjs utilizzato nel capitolo Pages .

Aggiorna index.js come segue:

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

Aggiorna first.js come segue:

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>
      </>	  
   )
}

Qui abbiamo aggiunto un riferimento a logo.png nel file index.js.

Avvia Next.js Server

Eseguire il comando seguente per avviare il server -.

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

Verifica output

Apri localhost: 3000 in un browser e vedrai il seguente output.

Fare clic sul collegamento Prima pagina e verificare il titolo modificato anche nella pagina Primo articolo.

In Next.js, possiamo usare la libreria css-in-js incorporata denominata styled-jsx. Permette di scrivere CSS all'interno di un componente React e questi stili saranno limitati al componente.

In questo esempio, creeremo un oggetto Contenitore che verrà utilizzato per definire altri componenti contenendoli.

Aggiorniamo il progetto nextjs utilizzato nel capitolo Meta Data .

Per prima cosa crea una directory dei componenti a livello di root e aggiungi un file container.module.css come segue:

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

Crea il file container.js nella directory dei componenti

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

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

export default Container

Ora usa il componente Contenitore in 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>
      </>	  
   )
}

Avvia Next.js Server

Eseguire il comando seguente per avviare il server -.

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

Verifica output

Apri localhost: 3000 in un browser e vai al primo post, vedrai il seguente output.

In Next.js, creiamo stili globali che verranno applicati a tutte le pagine.

In questo esempio, creeremo un styles.css che verrà utilizzato su tutti i componenti utilizzando il componente _app.js.

Aggiorniamo il progetto nextjs usato nel capitolo Supporto CSS .

Per prima cosa crea una directory styles a livello di root e aggiungi un file styles.css come segue:

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;
}

Crea il file _app.js nella directory delle pagine

import '../styles/styles.css'

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

Avvia Next.js Server

Eseguire il comando seguente per avviare il server -.

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

Verifica output

Apri localhost: 3000 in un browser e vedrai il seguente output.

Fare clic sul collegamento Primo post.

In Next.js, sappiamo che genera HTML per una pagina chiamata pre-rendering. Next.JS supporta due tipi di pre-rendering.

• Static Generation- Questo metodo genera la pagina HTML in fase di compilazione. Questo HTML pre-renderizzato viene inviato a ogni richiesta. Questo metodo è utile per siti Web di marketing, blog, prodotti di e-commerce che elencano siti Web, guide, siti Web di documentazione.

• Server Side Generation- Questo metodo genera la pagina HTML su ogni richiesta. Questo metodo è adatto quando il contenuto di una pagina html può variare a ogni richiesta.

Pre-rendering per pagina

Next.JS consente di impostare il metodo di pre-rendering per ogni pagina in cui la maggior parte delle pagine segue la generazione statica e altre pagine utilizzeranno il rendering lato server.

Generazione statica senza dati

La generazione statica può essere eseguita senza dati, nel qual caso le pagine HTML saranno pronte senza bisogno di precaricare i dati e quindi avviare il rendering. I dati possono essere recuperati in seguito o su richiesta. Questa tecnica aiuta a mostrare all'utente un'interfaccia utente senza dati nel caso in cui i dati richiedano tempo.

Generazione statica con dati

La generazione statica può essere eseguita con i dati, nel qual caso le pagine HTML non saranno pronte fino a quando i dati non verranno recuperati, poiché l'HTML potrebbe dipendere dai dati. Ogni componente ha un metodo specialegetStaticProps che può essere utilizzato per recuperare i dati e passare i dati come oggetti di scena della pagina in modo che la pagina possa eseguire il rendering degli accordi con gli oggetti di scena passati.

La funzione getStaticProps () viene eseguita in fase di compilazione in produzione e per ogni richiesta in modalità sviluppatore.

Creiamo un esempio per dimostrare lo stesso.

In questo esempio, creeremo una pagina di aggiornamento index.js e first.js per fare un accesso al server per ottenere dati.

Aggiorniamo il progetto nextjs utilizzato nel capitolo Global CSS Support .

Aggiorna il file index.js nella directory delle pagine per utilizzare il metodo getServerSideProps (). Questo metodo verrà chiamato per richiesta.

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

Aggiorna il file first.js nella directory pages per utilizzare il metodo getStaticProps (). Questo metodo verrà chiamato una volta.

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

Avvia Next.js Server

Eseguire il comando seguente per avviare il server -.

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

Verifica output

Apri localhost: 3000 in un browser e vedrai il seguente output.

Fare clic sul collegamento Primo post.

Next.js utilizza un router basato su file system. Ogni volta che aggiungiamo una pagina apagesdirectory, è automaticamente disponibile tramite url. Di seguito sono riportate le regole di questo router.

• Index Routes- Un file index.js presente in una cartella viene mappato alla radice della directory. Ad esempio:

  • pages / index.js viene mappato a "/".

  • pages / posts / index.js viene mappato a "/ posts".

• Nested Routes- Qualsiasi struttura di cartelle nidificata nella directory delle pagine perché l'URL del router automaticamente. Ad esempio:

  • pages / settings / dashboard / about.js si associa a "/ settings / dashboard / about".

  • pages / posts / first.js viene mappato a "/ posts / first".

• Dynamic Routes- Possiamo usare anche il parametro denominato per abbinare l'URL. Usa le parentesi per lo stesso. Ad esempio:

  • pages / posts / [id] .js viene mappato a "/ posts /: id" dove possiamo usare URL come "/ posts / 1".

  • pages / [user] /settings.js mappa a "/ posts /: user / settings" dove possiamo usare URL come "/ abc / settings".

  • pages / posts / [... all] .js viene mappato a '/ posts / *' dove possiamo usare qualsiasi URL come '/ posts / 2020 / jun /'.

Collegamento alla pagina

Next.JS consente di collegare le pagine sul lato client utilizzando il componente Link React. Ha le seguenti proprietà:

• href- nome della pagina nella directory delle pagine. Per esempio/posts/first che si riferisce a first.js presente nella directory pages / posts.

Creiamo un esempio per dimostrare lo stesso.

In questo esempio, aggiorneremo index.js e first.js pagina per fare un colpo sul server per ottenere dati.

Aggiorniamo il progetto nextjs utilizzato nel capitolo Global CSS Support .

Aggiorna il file index.js nella directory delle pagine come segue.

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

Avvia Next.js Server

Eseguire il comando seguente per avviare il server -.

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

Verifica output

Apri localhost: 3000 in un browser e vedrai il seguente output.

Fare clic sul collegamento Primo post.

In Next.js, possiamo creare rotte dinamicamente. In questo esempio, creeremo le pagine al volo e il loro percorso.

• Step 1. Define [id].js file- [id] .js rappresenta la pagina dinamica in cui id sarà il percorso relativo. Definisci questo file nella directory pages / post.

• Step 2. Define lib/posts.js- posts.js rappresenta gli ID e i contenuti. La directory lib deve essere creata nella directory root.

[id] .js

Aggiorna il file [id] .js con il metodo getStaticPaths () che imposta i percorsi e il metodo getStaticProps () per ottenere i contenuti in base a 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 () per ottenere gli ID e getPostData () per ottenere i contenuti corrispondenti.

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'
      }
   }
];
}

Avvia Next.js Server

Eseguire il comando seguente per avviare il server -.

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

Verifica output

Apri localhost: 3000 / posts / one in un browser e vedrai il seguente output.

Apri localhost: 3000 / posts / two in un browser e vedrai il seguente output.

In Next.js, finora stiamo utilizzando il componente Link react per navigare da una pagina all'altra. Esiste anche un modo programmatico per ottenere lo stesso risultato utilizzando il componente Router. Generalmente il componente Router viene utilizzato con i tag html.

Aggiorna il file index.js nella directory delle pagine come segue.

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

Avvia Next.js Server

Eseguire il comando seguente per avviare il server -.

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

Verifica output

Apri localhost: 3000 in un browser e vedrai il seguente output.

Fare clic su Primo post che non è un collegamento ma è cliccabile.

In Next.js, il routing superficiale si riferisce alla navigazione alla stessa pagina ma nessuna chiamata ai metodi getServerSideProps, getStaticProps e getInitialProps.

Per eseguire il routing superficiale, usiamo Router con flag superficiale come true. Vedi l'esempio sotto.

Aggiorna il file index.js nella directory delle pagine come segue.

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

Avvia Next.js Server

Eseguire il comando seguente per avviare il server -.

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

Verifica output

Apri localhost: 3000 in un browser, quindi fai clic sul collegamento Ricarica e vedrai il seguente output.

Percorsi API è un modo per creare API rest utilizzando Next.js. Next.js mappa qualsiasi file presente in/pages/apicartella e verrà considerato come endpoint API. Un esempio di funzione API -

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

Di seguito sono riportati alcuni punti importanti da considerare.

• req - req è un'istanza di http.IncomingMessage e viene utilizzato per ottenere dati dalla richiesta.

• res - res è un'istanza di http.ServerResponse e viene utilizzato per inviare dati come risposta.

Creiamo un esempio per dimostrare lo stesso.

In questo esempio, creeremo un user.js in pages/api directory.

Aggiorniamo il progetto nextjs utilizzato nel capitolo Global CSS Support .

Crea il file user.js nella directory pages / api come segue.

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

Avvia Next.js Server

Eseguire il comando seguente per avviare il server -.

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

Verifica output

Apri localhost: 3000 / api / user in un browser e vedrai il seguente output.

{"name":"Robert"}

Le rotte API in Next.JS hanno middleware incorporati che aiutano ad analizzare la richiesta in arrivo.

Di seguito sono riportati i middleware

• req.cookies- L'oggetto cookies contiene i cookies inviati dalla richiesta. Il valore predefinito è {}.

• req.query- l'oggetto query contiene la stringa della query. Il valore predefinito è {}.

• req.body- l'oggetto query contiene il corpo della richiesta analizzato utilizzando "content-type". Il valore predefinito è null.

Creiamo un esempio per dimostrare lo stesso.

In questo esempio, aggiorneremo un user.js in pages/api directory.

Aggiorniamo il progetto nextjs utilizzato nel capitolo Percorsi API .

Crea il file user.js nella directory pages / api come segue.

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

Avvia Next.js Server

Eseguire il comando seguente per avviare il server -.

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

Verifica output

Apri http: // localhost: 3000 / api / user? Counter = 1 in un browser e vedrai il seguente output.

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

res object hanno express.js come metodi di supporto per facilitare lo sviluppo per creare servizi.

Di seguito sono riportati i metodi di supporto della risposta

• res.status(code)- Questi metodi impostano lo stato della risposta. Il codice passato deve essere uno stato HTTP valido.

• req.json(json)- Questo metodo restituisce una risposta JSON. json passato deve essere un oggetto JSON valido.

• req.send(body)- Questo metodo invia una risposta HTTP. La risposta può essere stringa, oggetto o Buffer.

Creiamo un esempio per dimostrare lo stesso.

In questo esempio, aggiorneremo un user.js in pages/api directory.

Aggiorniamo il progetto nextjs utilizzato nel capitolo Percorsi API .

Crea il file user.js nella directory pages / api come segue.

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

Avvia Next.js Server

Eseguire il comando seguente per avviare il server -.

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

Verifica output

Apri http: // localhost: 3000 / api / user in un browser e vedrai il seguente output.

{ name: 'Robert' }

Next.js, ha un supporto eccellente per i dattiloscritti. Di seguito sono riportati alcuni passaggi per abilitare il dattiloscritto nel progetto.

Crea tsconfig.json

Crea tsconfig.json nella directory principale. Inizialmente lo teniamo vuoto. Ora avvia il server.

Next.JS rileverà tsconfig.json e mostrerà il seguente messaggio sulla console.

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).
...

Installa il dattiloscritto

Eseguire il comando npm install per installare il dattiloscritto e le librerie correlate.

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
...

Avvia Next.js Server

Eseguire il comando seguente per avviare il server -.

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

Apri tsconfig.json

Il server NextJS ha modificato il file 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"
   ]
}

Crea hello.ts

Crea hello.ts nella directory pages / api che fungerà da servizio di riposo per noi.

import { NextApiRequest, NextApiResponse } from 'next'

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

Avvia Next.js Server

Eseguire il comando seguente per avviare il server -.

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

Verifica output

Apri localhost: 3000 / api / hello in un browser e vedrai il seguente output.

{"text":"Welcome to TutorialsPoint"}

Next.js, ha il supporto per la pubblicazione di variabili d'ambiente nel nodo che possiamo usare per la connessione al server, database ecc. Per questo, abbiamo bisogno di creare il file .env.local nella directory principale. Possiamo anche creare .env.production.

Crea .env.local

Crea .env.local nella directory principale con i seguenti contenuti.

DB_HOST=localhost
DB_USER=tutorialspoint
DB_PASS=nextjs

Crea env.js

Crea una pagina chiamata env.js con i seguenti contenuti nella directory pages / posts dove useremo le variabili d'ambiente 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
      }
   }
}

Ora avvia il server.

Next.JS rileverà .env.local e mostrerà il seguente messaggio sulla console.

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

Verifica output

Apri localhost: 3000 / posts / env in un browser e vedrai il seguente output.

Finora abbiamo sviluppato ed eseguito l'applicazione NEXT.JS di esempio in modalità dev, ora eseguiremo la distribuzione pronta per la produzione localmente utilizzando i seguenti passaggi.

• npm run build - Costruisci la build pronta per la produzione, altamente ottimizzata.

• npm run start - Avvia il server.

La build pronta per la produzione manca di mappe sorgente e ricaricamento del codice a caldo rispetto alla modalità sviluppatore poiché queste funzionalità vengono utilizzate principalmente nel debug.

Prepara build

Eseguire il comando seguente per preparare la build pronta per la produzione -.

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)

Avvia il server

Eseguire il seguente comando per avviare il server di produzione -.

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

Verifica output

Apri localhost: 3000 / api / user in un browser e vedrai il seguente output.

{"name":"Robert"}

NEXT.JS fornisce una CLI per avviare, creare ed esportare l'applicazione. Può essere richiamato utilizzando npx, disponibile da npm 5.2 in poi.

Guida CLI

Per ottenere l'elenco dei comandi CLI e la guida su di essi, digitare il comando seguente.

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

Costruisci build pronta per la produzione

Digita il seguente 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)

Compilare e avviare il server di sviluppo

Digita il seguente comando.

npx next dev

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

Avvia il server di produzione

Digita il seguente comando.

npx next start

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