Next.js Basics Tutorial – Server-side Rendering, Static Sites, REST APIs, Routing e Mais


Nextjs é uma estrutura JavaScript que ajuda a construir aplicativos da web usando Reactjs. Ele oferece muitos recursos e ferramentas que tornam a construção de um aplicativo completo mais simples e fácil.

Nextjs oferece uma ótima experiência de desenvolvedor em muitas áreas. Ele também simplificou muitos recursos que eram complicados no passado, como renderização do lado do servidor, geração de site estático e trabalho com APIs REST.

Neste artigo, vou orientá-lo no Nextjs recursos que eu pessoalmente uso mais.

Como instalar e configurar o Nextjs

Você pode executar e construir um aplicativo da web inteiro com configuração zero com Nextjs. É super fácil de usar – você pode simplesmente inicializar um completo Nextjs aplicativo com apenas um comando, como este:

yarn create next-app

Então você apenas corre yarn dev e seu aplicativo está ativo!

Adicione uma configuração personalizada ao aplicativo Nextjs

Nextjs permite que você adicione uma configuração personalizada para webpack. Você também pode adicionar e integrar plug-ins.

Às vezes, você pode precisar adicionar um plugin para lidar com o processamento de imagem ou para suportar um pacote que não é compatível com Nextjs por padrão, como o processamento CSS, por exemplo.

Para fazer isso, você pode criar next.config.js no diretório de rota do aplicativo. O exemplo abaixo mostra como adicionar um plugin para carregar arquivos de ambiente.

require("dotenv").config();
const webpack = require("webpack");
module.exports = {

  webpack: (config) => {
    config.plugins.push(new webpack.EnvironmentPlugin(process.env));
    return config;
  },
};

É simples adicionar ferramentas como TypeScript, Firebase ou AWS. Nextjs também oferece muitos boilerplates para cada caso em seu Repositório GitHub. Verifique-os para ver quais você deseja usar.

Adicionar Firebase ao Nextjs

Por exemplo, se você deseja adicionar o firebase pronto para uso, pode executar o seguinte comando:

yarn create next-app --example with-firebase with-firebase-app

Ele inicializará um aplicativo Nextjs com o firebase pré-configurado e instalará os pacotes de que o Firebase precisa para ser executado. Você pode dar uma olhada no exemplo completo aqui.

Adicionar suporte TypeScript

Um comando é suficiente para adicionar suporte a TypeScript para Nextjs:

touch tsconfig.json

Isso criará um tsconfig.json arquivo para o compilador TypeScript. Nextjs irá detectar o arquivo automaticamente e gerar uma configuração TypeScript padrão para você. Você pode adicionar sua configuração personalizada mais tarde, apenas certifique-se de adicionar um ts extensão para seus componentes para que o compilador possa interpretar seus arquivos como arquivos TypeScript.

Renderização do lado do servidor

A renderização do lado do servidor ajuda seu site SEO. Portanto, se a pesquisa é uma de suas prioridades, Nextjs é uma boa escolha para você.

Nextjs oferece melhores opções de como renderizar seu aplicativo. Por exemplo, você pode ativar ou desativar a renderização do lado do servidor para cada página.

Se você usar getServerSideProps isso torna a página do lado do servidor renderizada por padrão e dá acesso aos props do lado do servidor.

Sites e componentes estáticos

Você pode exportar seu aplicativo como um site estático e hospedá-lo em uma ferramenta de hospedagem estática como o Netlify.

o next export command irá gerar um componente estático para você.

Para construir e exportar o aplicativo como HTML estático, execute o seguinte comando:

next build && next export

Confira o oficial Nextjs docs para explorar mais opções ao exportar como HTML.

Encaminhamento

O roteamento vem integrado com Nextjs – você não precisa usar nenhuma biblioteca de terceiros para lidar com isso. Ele também vem com duas abordagens diferentes, roteamento dinâmico e rotas imperiais (predefinidas).

As rotas dinâmicas permitem que você crie traços e caminhos dinâmicos. Imagine que você tem um blog e deseja exibir os detalhes de cada postagem. Em vez de criar várias páginas (predefinidas) para cada postagem, você usaria uma página dinâmica e reutilizável.

O roteamento dinâmico pode ser implementado da seguinte maneira:

  • Dentro de Páginas pasta cria uma pasta que será usada para processar o caminho dinâmico. Podemos chamá-lo page.
  • Para torná-lo dinâmico, podemos apenas adicionar uma barra e um parâmetro, como este: page/[pid]. O parâmetro deve estar entre dois colchetes.
  • Então criamos um index.js arquivo dentro do page/[pid] pasta. Ele contém o seguinte código:

import React from 'react'
import {useRouter, Router} from 'next/router'
import {route} from 'next/dist/next-server/server/router'

export default function pid() {
  const router = useRouter()
  const {pid} = router.query
  return <div>Page id :{pid}</div>
}

http://localhost:3000/page/2 é um exemplo de caminho. Nós também podemos usar route.query para acessar todos os parâmetros como no exemplo acima.

Como construir uma API REST

Além de outros recursos, você pode construir endpoints da API REST dentro do seu aplicativo Nextjs e consumi-lo no mesmo aplicativo ou em qualquer outro aplicativo.

O exemplo abaixo é uma pequena demonstração de um endpoint simples que retorna uma lista de postagens.

Se você estiver usando nextjs 9.5.2 ou superior, vem com um api pasta por padrão, geralmente no Páginas pasta.

Aqui está um exemplo de uso de um endpoint que retorna um json resposta.

/api/posts

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction

const posts = [
  {
    id: 1,
    name: 'Nextjs is awesome'
  },
  {
    id: 2,
    name: 'Using TypeScript with Nextjs'
  },
  {
    id: 3,
    name: 'GraphQL Vs REST'
  },
  {
    id: 4,
    name: 'Bridging in React Native'
  }
]
export default (req, res) => {
  res.statusCode = 200
  res.json(posts)
}

E se você for para https://localhost:5000/api/posts ele retornará uma resposta JSON de postagens.

Características adicionais

Módulos CSS

Nextjs suporta módulos CSS por padrão. Você pode criar diretamente um módulo CSS com o style.module.css comando e importe-o dentro de qualquer componente como este:

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

Você também pode usar CSS em JS da mesma forma que em React.

<div style={{
  width:300 
}>
   Card
</div>

Eu recomendo que você dê uma olhada nextjs.org para aprender mais sobre recursos adicionais.

O código fonte dos exemplos usados ​​neste blog pode ser encontrado no GitHub.

Você deve me seguir no Twitter e se inscrever no meu Mailing-list.

Olá, meu nome é Said Hayani. eu criei subscribi.io para ajudar criadores, blogueiros e influenciadores a aumentar seu público por meio do boletim informativo.



Fonte

Leave a Reply

Your email address will not be published. Required fields are marked *