Next.js - Guia rápido

O Next.js é uma estrutura baseada em React com capacidade de renderização do lado do servidor. É muito rápido e otimizado para SEO.

Usando Next.js, você pode criar aplicativos baseados em reações robustas com bastante facilidade e testá-los. A seguir estão os principais recursos do Next.js.

  • Hot Code Reload - O servidor Next.js detecta arquivos modificados e os recarrega automaticamente.

  • Automatic Routing- Não há necessidade de configurar qualquer url para roteamento. os arquivos devem ser colocados na pasta de páginas. Todos os urls serão mapeados para o sistema de arquivos. A personalização pode ser feita.

  • Component specific styles - styled-jsx fornece suporte para estilos globais e também para estilos específicos de componentes.

  • Server side rendering - os componentes react são pré-renderizados no servidor, portanto carregam mais rápido no cliente.

  • Node Ecosystem - Next.js sendo géis baseados em reação bem com o ecossistema Node.

  • Automatic code split- Next.js renderiza páginas com as bibliotecas de que precisam. Next.js em vez de criar um único arquivo javascript grande, cria múltiplos recursos. Quando uma página é carregada, apenas a página javascript necessária é carregada com ela.

  • Prefetch - Next.js fornece o componente Link que é usado para vincular vários componentes e oferece suporte a uma propriedade de pré-busca para pré-buscar recursos da página em segundo plano.

  • Dynamic Components - Next.js permite importar módulos JavaScript e componentes React dinamicamente.

  • Export Static Site - Next.js permite exportar site estático completo de seu aplicativo da web.

  • Built-in Typescript Support - Next.js é escrito em Typescripts e fornece excelente suporte para Typescript.

Como Next.js é uma estrutura baseada em reação, estamos usando o ambiente Node. Agora certifique-se de terNode.js e npminstalado em seu sistema. Você pode usar o seguinte comando para instalar Next.js -

npm install next react react-dom

Você pode observar a seguinte saída assim que Next.js for instalado com sucesso -

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

Agora, vamos criar um nó package.json -

npm init

Selecione os valores padrão ao criar um 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)

Agora atualize a seção de scripts de package.json para incluir comandos 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"
}

Crie um diretório de páginas.

Crie uma pasta de páginas dentro da pasta nextjs e crie um arquivo index.js com o seguinte conteúdo.

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

export default HomePage

Inicie o servidor Next.js

Execute o seguinte comando para iniciar o 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 saída

Abra localhost: 3000 em um navegador e você verá a seguinte saída.

Em Next.js, podemos criar páginas e navegar entre elas usando o recurso de roteamento do sistema de arquivos. Vamos usarLink componente para ter uma navegação do lado do cliente entre as páginas.

Em Next.js, uma página é um componente React e é exportada do diretório de páginas. Cada página está associada a uma rota com base em seu nome de arquivo. Por exemplo

  • pages/index.js está vinculado à rota '/'.

  • pages/posts/first.js está ligado à rota '/ posts / first' e assim por diante.

Vamos atualizar o projeto nextjs criado no capítulo Configuração do Ambiente .

Crie um diretório de postagem e first.js dentro dele com o seguinte conteúdo.

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

Adicione Link Support para voltar à página inicial. Atualize first.js da seguinte maneira -

import Link from 'next/link'

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

Adicione Link Support à página inicial para navegar até a primeira página. Atualize index.js da seguinte forma -

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 o servidor Next.js

Execute o seguinte comando para iniciar o 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 saída

Abra localhost: 3000 em um navegador e você verá a seguinte saída.

Clique no primeiro link e você verá a seguinte saída.

Em Next.js, podemos servir páginas estáticas como imagens muito facilmente, colocando-as em public, um diretório de nível superior. Podemos consultar esses arquivos de maneira semelhante, como páginas empages diretório.

Em Next.js, uma página é um componente React e é exportada do diretório de páginas. Cada página está associada a uma rota com base em seu nome de arquivo.

Vamos atualizar o projeto nextjs usado no capítulo Pages .

Crie um diretório público e coloque quaisquer imagens dentro dele. Pegamos logo.png, imagem do logotipo do TutorialsPoint.

Atualize first.js da seguinte maneira -

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

Aqui, adicionamos uma referência a logo.png no arquivo index.js.

Inicie o servidor Next.js

Execute o seguinte comando para iniciar o 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 saída

Abra localhost: 3000 em um navegador e você verá a seguinte saída.

O diretório público também é útil no caso de propósito de SEO. Ele pode ser usado para o robots.txt, verificação do Google Site ou qualquer outro ativo estático no aplicativo da web.

Em Next.js, podemos modificar a seção principal de cada página de reação muito facilmente com a ajuda de <Head> componente de reação que está embutido.

Vamos atualizar o projeto nextjs usado no capítulo Pages .

Atualize index.js da seguinte forma - 

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

Atualize first.js da seguinte maneira -

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

Aqui, adicionamos uma referência a logo.png no arquivo index.js.

Inicie o servidor Next.js

Execute o seguinte comando para iniciar o 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 saída

Abra localhost: 3000 em um navegador e você verá a seguinte saída.

Clique no link Primeira página e verifique se o título mudou na página Primeira postagem também.

Em Next.js, podemos usar a biblioteca css-in-js embutida chamada styled-jsx. Ele permite escrever css dentro de um componente react e esses estilos terão como escopo o componente.

Neste exemplo, criaremos um objeto Container que será usado para estilizar outros componentes, contendo-os.

Vamos atualizar o projeto nextjs usado no capítulo Meta Dados .

Primeiro crie um diretório de componentes no nível raiz e adicione um arquivo container.module.css da seguinte maneira -

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

Crie o arquivo container.js no diretório Componentes

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

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

export default Container

Agora use o componente Container em 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 o servidor Next.js

Execute o seguinte comando para iniciar o 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 saída

Abra localhost: 3000 em um navegador e vá para a primeira postagem, você verá a seguinte saída.

Em Next.js, vamos criar estilos globais que serão aplicados em todas as páginas.

Neste exemplo, criaremos um styles.css que será usado em todos os componentes usando o componente _app.js.

Vamos atualizar o projeto nextjs usado no capítulo Suporte CSS .

Primeiro crie um diretório de estilos no nível raiz e adicione um arquivo styles.css da seguinte maneira -

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

Criar arquivo _app.js no diretório de páginas

import '../styles/styles.css'

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

Inicie o servidor Next.js

Execute o seguinte comando para iniciar o 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 saída

Abra localhost: 3000 em um navegador e você verá a seguinte saída.

Clique no link da primeira postagem.

Em Next.js, sabemos que ele gera HTML para uma página chamada pré-renderização. Next.JS suporta dois tipos de pré-renderização.

  • Static Generation- Este método gera a página HTML no momento da construção. Este HTML pré-renderizado é enviado em cada solicitação. Este método é útil para sites de marketing, blogs, sites de listagem de produtos de comércio eletrônico, ajuda, sites de documentação.

  • Server Side Generation- Este método gera a página HTML em cada solicitação. Este método é adequado quando o conteúdo de uma página html pode variar com cada solicitação.

Pré-renderização por página

Next.JS permite definir o método de pré-renderização para cada página onde a maioria das páginas segue a geração estática e outras páginas usarão a renderização do lado do servidor.

Geração estática sem dados

A geração estática pode ser feita sem dados. Nesse caso, as páginas HTML estarão prontas sem a necessidade de pré-buscar os dados e, em seguida, iniciar a renderização. Os dados podem ser obtidos posteriormente ou mediante solicitação. Essa técnica ajuda a mostrar ao usuário uma interface de usuário sem quaisquer dados, caso os dados demorem para chegar.

Geração estática com dados

A geração estática pode ser feita com dados. Nesse caso, as páginas HTML não estarão prontas até que os dados sejam buscados, pois o HTML pode depender dos dados. Cada componente tem um método especialgetStaticProps que pode ser usado para buscar dados e passar dados como adereços da página para que a página possa renderizar de acordo com os adereços passados.

A função getStaticProps () é executada no momento da construção na produção e é executada para cada solicitação no modo de desenvolvimento.

Vamos criar um exemplo para demonstrar o mesmo.

Neste exemplo, criaremos uma página de atualização index.js e first.js para fazer um acerto no servidor para obter dados.

Vamos atualizar o projeto nextjs usado no capítulo Suporte Global de CSS .

Atualize o arquivo index.js no diretório de páginas para usar o método getServerSideProps (). Este método será chamado por solicitação.

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

Atualize o arquivo first.js no diretório de páginas para usar o método getStaticProps (). Este método será chamado uma 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 o servidor Next.js

Execute o seguinte comando para iniciar o 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 saída

Abra localhost: 3000 em um navegador e você verá a seguinte saída.

Clique no link da primeira postagem.

Next.js usa um roteador baseado em sistema de arquivos. Sempre que adicionamos qualquer página apagesdiretório, ele está automaticamente disponível via url. A seguir estão as regras deste roteador.

  • Index Routes- Um arquivo index.js presente em uma pasta mapeia para a raiz do diretório. Por exemplo -

    • pages / index.js mapeia para '/'.

    • pages / posts / index.js mapeia para '/ posts'.

  • Nested Routes- Qualquer estrutura de pasta aninhada no diretório de páginas porque o roteador url automaticamente. Por exemplo -

    • pages / settings / dashboard / about.js mapeia para '/ settings / dashboard / about'.

    • pages / posts / first.js mapeia para '/ posts / first'.

  • Dynamic Routes- Podemos usar o parâmetro nomeado também para corresponder ao url. Use colchetes para o mesmo. Por exemplo -

    • pages / posts / [id] .js mapeia para '/ posts /: id' onde podemos usar URL como '/ posts / 1'.

    • pages / [user] /settings.js mapeia para '/ posts /: user / settings' onde podemos usar URL como '/ abc / settings'.

    • pages / posts / [... all] .js mapeia para '/ posts / *' onde podemos usar qualquer URL como '/ posts / 2020 / jun /'.

Link de página

Next.JS permite vincular páginas no lado do cliente usando o componente Link react. Possui as seguintes propriedades -

  • href- nome da página no diretório de páginas. Por exemplo/posts/first que se refere a first.js presente no diretório pages / posts.

Vamos criar um exemplo para demonstrar o mesmo.

Neste exemplo, vamos atualizar a página index.js e first.js para fazer um acerto no servidor para obter dados.

Vamos atualizar o projeto nextjs usado no capítulo Suporte Global de CSS .

Atualize o arquivo index.js no diretório de páginas conforme a seguir.

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 o servidor Next.js

Execute o seguinte comando para iniciar o 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 saída

Abra localhost: 3000 em um navegador e você verá a seguinte saída.

Clique no link da primeira postagem.

Em Next.js, podemos criar rotas dinamicamente. Neste exemplo, criaremos páginas dinamicamente e seu roteamento.

  • Step 1. Define [id].js file- [id] .js representa a página dinâmica onde id será o caminho relativo. Defina este arquivo no diretório pages / post.

  • Step 2. Define lib/posts.js- posts.js representa os ids e conteúdos. O diretório lib deve ser criado no diretório raiz.

[id] .js

Atualize o arquivo [id] .js com o método getStaticPaths () que define os caminhos e o método getStaticProps () para obter o conteúdo com base no 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 contém getAllPostIds () para obter os ids e getPostData () para obter os conteúdos correspondentes.

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 o servidor Next.js

Execute o seguinte comando para iniciar o 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 saída

Abra localhost: 3000 / posts / one em um navegador e você verá a seguinte saída.

Abra localhost: 3000 / posts / two em um navegador e você verá a seguinte saída.

No Next.js, até agora estamos usando o componente Link react para navegar de uma página para outra. Também existe uma maneira programática de obter o mesmo usando o componente Roteador. Geralmente o componente roteador é usado com tags html.

Atualize o arquivo index.js no diretório de páginas conforme a seguir.

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 o servidor Next.js

Execute o seguinte comando para iniciar o 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 saída

Abra localhost: 3000 em um navegador e você verá a seguinte saída.

Clique em Primeira postagem, que não é um link, mas é clicável.

Em Next.js, roteamento superficial se refere à navegação para a mesma página, mas nenhuma chamada para os métodos getServerSideProps, getStaticProps e getInitialProps.

Para fazer o roteamento superficial, usamos Roteador com sinalizador raso como verdadeiro. Veja o exemplo abaixo.

Atualize o arquivo index.js no diretório de páginas conforme a seguir.

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 o servidor Next.js

Execute o seguinte comando para iniciar o 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 saída

Abra o localhost: 3000 em um navegador e clique no link Recarregar e você verá a seguinte saída.

Rotas de API é uma maneira de criar API rest usando Next.js. Next.js mapeia qualquer arquivo presente em/pages/apipasta e será tratado como ponto final da API. Um exemplo de função API -

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

A seguir estão alguns pontos importantes a serem considerados.

  • req - req é uma instância de http.IncomingMessage e é usado para obter dados da solicitação.

  • res - res é uma instância de http.ServerResponse e é usado para enviar dados como resposta.

Vamos criar um exemplo para demonstrar o mesmo.

Neste exemplo, vamos criar um user.js em pages/api diretório.

Vamos atualizar o projeto nextjs usado no capítulo Suporte Global de CSS .

Crie o arquivo user.js no diretório pages / api como segue.

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

Inicie o servidor Next.js

Execute o seguinte comando para iniciar o 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 saída

Abra localhost: 3000 / api / user em um navegador e você verá a seguinte saída.

{"name":"Robert"}

Rotas de API em Next.JS têm middlewares integrados que ajudam a analisar a solicitação de entrada.

A seguir estão os middlewares

  • req.cookies- o objeto cookies contém os cookies enviados pela solicitação. O valor padrão é {}.

  • req.query- objeto de consulta contém a string de consulta. O valor padrão é {}.

  • req.body- objeto de consulta contém o corpo da solicitação analisado usando 'tipo de conteúdo'. O valor padrão é nulo.

Vamos criar um exemplo para demonstrar o mesmo.

Neste exemplo, vamos atualizar um user.js em pages/api diretório.

Vamos atualizar o projeto nextjs usado no capítulo Rotas de API .

Crie o arquivo user.js no diretório pages / api como segue.

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

Inicie o servidor Next.js

Execute o seguinte comando para iniciar o 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 saída

Abra http: // localhost: 3000 / api / user? Counter = 1 em um navegador e você verá a seguinte saída.

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

res objeto tem express.js como métodos auxiliares para facilitar o desenvolvimento para criar serviços.

A seguir estão os métodos auxiliares de resposta

  • res.status(code)- Este método define o status da resposta. O código passado deve ser um status HTTP válido.

  • req.json(json)- Este método retorna uma resposta JSON. json aprovado deve ser um objeto JSON válido.

  • req.send(body)- Este método envia uma resposta HTTP. A resposta pode ser string, objeto ou buffer.

Vamos criar um exemplo para demonstrar o mesmo.

Neste exemplo, vamos atualizar um user.js em pages/api diretório.

Vamos atualizar o projeto nextjs usado no capítulo Rotas de API .

Crie o arquivo user.js no diretório pages / api como segue.

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

Inicie o servidor Next.js

Execute o seguinte comando para iniciar o 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 saída

Abra http: // localhost: 3000 / api / user em um navegador e você verá a seguinte saída.

{ name: 'Robert' }

Next.js, tem excelente suporte para typescript. A seguir estão algumas etapas para habilitar o texto digitado no projeto.

Crie tsconfig.json

Crie tsconfig.json no diretório raiz. Estamos mantendo-o vazio inicialmente. Agora inicie o servidor.

Next.JS detectará tsconfig.json e mostrará a mensagem a seguir no 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).
...

Instale o typescript

Execute o comando npm install para instalar o typescript e as 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 o servidor Next.js

Execute o seguinte comando para iniciar o 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

O servidor NextJS modificou o 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"
   ]
}

Crie hello.ts

Crie hello.ts no diretório pages / api que atuará como um serviço de descanso para nós.

import { NextApiRequest, NextApiResponse } from 'next'

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

Inicie o servidor Next.js

Execute o seguinte comando para iniciar o 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 saída

Abra localhost: 3000 / api / hello em um navegador e você verá a seguinte saída.

{"text":"Welcome to TutorialsPoint"}

Next.js, tem suporte para publicar variáveis ​​de ambiente no nó que podemos usar na conexão com o servidor, banco de dados etc. Para isso, precisamos criar o arquivo .env.local no diretório raiz. Também podemos criar .env.production.

Crie .env.local

Crie .env.local no diretório raiz com o seguinte conteúdo.

DB_HOST=localhost
DB_USER=tutorialspoint
DB_PASS=nextjs

Crie env.js

Crie uma página chamada env.js com o seguinte conteúdo no diretório pages / posts onde usaremos as variáveis ​​de 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
      }
   }
}

Agora inicie o servidor.

O Next.JS detectará .env.local e mostrará a mensagem a seguir no 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

Verificar saída

Abra localhost: 3000 / posts / env em um navegador e você verá a seguinte saída.

Até agora, desenvolvemos e executamos o aplicativo NEXT.JS de amostra no modo dev, agora faremos a implantação pronta para produção localmente usando as etapas a seguir.

  • npm run build - Construir a construção pronta para produção e altamente otimizada.

  • npm run start - Inicie o servidor.

A compilação pronta para produção carece de mapas de origem e recarregamento de código ativo em comparação com o modo de desenvolvimento, pois esses recursos são usados ​​principalmente na depuração.

Prepare Build

Execute o seguinte comando para preparar o build pronto para produção -.

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 o servidor

Execute o seguinte comando para iniciar o servidor de produção -.

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 saída

Abra localhost: 3000 / api / user em um navegador e você verá a seguinte saída.

{"name":"Robert"}

NEXT.JS fornece uma CLI para iniciar, construir e exportar aplicativos. Ele pode ser chamado usando o npx, que vem com o npm 5.2 em diante.

Ajuda CLI

Para obter uma lista de comandos CLI e ajuda sobre eles, digite o seguinte 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 Pronto para Produção Construir

Digite o seguinte 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 o servidor de desenvolvimento

Digite o seguinte comando.

npx next dev

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

Inicie o servidor de produção

Digite o seguinte comando.

npx next start

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