Next.js é uma estrutura React popular que permite aos desenvolvedores criar aplicativos rápidos renderizados em servidor. Ele fornece recursos poderosos prontos para uso, como geração de site estático (SSG), renderização do lado do servidor (SSR) e rotas de API. Neste guia, percorreremos o processo de construção de seu primeiro aplicativo Next.js, com foco nos principais conceitos e exemplos práticos.

1. Configurando seu projeto Next.js

Para começar a usar o Next.js, você precisa ter o Node.js instalado em sua máquina. Depois de configurar o Node.js, você pode criar um novo aplicativo Next.js usando o seguinte comando:

npx create-next-app my-next-app

Este comando cria um novo diretório chamado my-next-app com todos os arquivos e dependências necessários para iniciar um aplicativo Next.js.

2. Navegando na Estrutura do Projeto

Depois de criar seu projeto, navegue até o diretório do projeto:

cd my-next-app

Dentro do diretório my-next-app, você encontrará uma estrutura semelhante a esta:

my-next-app/
├── node_modules/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
├── public/
├── styles/
│   ├── Home.module.css
├── package.json
└── README.md

O diretório pages é onde você criará as páginas do seu aplicativo, enquanto public é para ativos estáticos.

3. Criando sua primeira página

Next.js usa um sistema de roteamento baseado em arquivo. Para criar uma nova página, basta adicionar um novo arquivo JavaScript dentro do diretório de páginas. Por exemplo, crie um arquivo chamado about.js:

// pages/about.js
import Link from 'next/link';

export default function About() {
  return (
    

      
About Page
      
This is the about page of my first Next.js application!
      Go back home
    
  );
}

Neste exemplo, criamos uma página Sobre simples e usamos o componente Link para navegar de volta à página inicial.

4. Modificando a página inicial

Abra o arquivo index.js no diretório de páginas. Este arquivo representa a página inicial do seu aplicativo. Você pode modificá-lo da seguinte maneira:

// pages/index.js
import Link from 'next/link';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    

      
Welcome to My Next.js App
      

        This is my first application built with Next.js.{' '}
        Learn more about me
      
    
  );
}

Aqui, adicionamos um estilo simples e um link para a página Sobre.

5. Adicionando estilos ao seu aplicativo

Next.js oferece suporte a módulos CSS prontos para uso. Para estilizar seus componentes, você pode criar um módulo CSS no diretório de estilos. Por exemplo, crie um arquivo chamado Home.module.css:

/* styles/Home.module.css */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

Em seguida, importe este módulo CSS para sua página index.js conforme mostrado na seção anterior.

6. Buscando dados com Next.js

Next.js facilita a busca de dados usando getStaticProps para geração de site estático ou getServerSideProps para renderização no lado do servidor. Por exemplo, para buscar dados na página inicial, você pode modificar index.js assim:

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
  };
}

export default function Home({ posts }) {
  return (
    

      
Welcome to My Next.js App
      

        {posts.map(post => (
          
{post.title}
        ))}
      
  );
}

Neste código, buscamos uma lista de postagens de uma API pública e as exibimos na página inicial.

7. Criando rotas de API

Next.js permite criar rotas de API no diretório pages/api. Essas rotas podem ser usadas para construir sua funcionalidade de back-end. Por exemplo, crie um arquivo chamado hello.js no diretório pages/api:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js API!' });
}

Você pode acessar esta rota de API navegando até http://localhost:3000/api/hello.

8. Implantando seu aplicativo Next.js

Quando seu aplicativo estiver pronto, você poderá implantá-lo facilmente. Vercel é a plataforma de hospedagem recomendada para aplicativos Next.js. Você pode implantar seu aplicativo seguindo estas etapas:

1. Crie uma conta Vercel se ainda não tiver uma.

2. Instale o Vercel CLI globalmente:
   

   npm install -g vercel
   

3. Execute o seguinte comando no diretório do seu projeto:
   

   vercel
   

4. Siga as instruções para implantar seu aplicativo.

9. Adicionando roteamento dinâmico

Next.js suporta roteamento dinâmico usando colchetes. Por exemplo, se quiser criar uma página de postagem de blog dinâmica, você pode criar um arquivo chamado [id].js no diretório pages/posts:

// pages/posts/[id].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return 
Post: {id}
;
}

Agora você pode acessar uma postagem específica navegando para /posts/1, /posts/2, etc.

10. Implementando Estilos Globais

Se você deseja aplicar estilos globais ao seu aplicativo, você pode fazer isso criando um arquivo chamado _app.js no diretório de páginas:

// pages/_app.js
import '../styles/globals.css';

export default function App({ Component, pageProps }) {
  return ;
}

Em seguida, crie um arquivo globals.css no diretório de estilos e adicione seus estilos globais:

/* styles/globals.css */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

11. Usando variáveis ​​de ambiente

Next.js oferece suporte a variáveis ​​de ambiente para armazenar informações confidenciais. Você pode criar um arquivo .env.local na raiz do seu projeto e adicionar suas variáveis:

API_URL=https://example.com/api

Você pode então acessar esta variável em seu aplicativo usando process.env:

// Example usage in a component
const apiUrl = process.env.API_URL;

Parabéns por construir seu primeiro aplicativo Next.js! Ao longo desta jornada, você aprendeu como configurar seu projeto, criar páginas dinâmicas, buscar dados perfeitamente, implementar roteamento robusto e implantar seu aplicativo com facilidade.

Next.js é mais do que apenas uma estrutura; é uma ferramenta poderosa que pode aprimorar significativamente sua experiência de desenvolvimento web. Seus recursos integrados, como geração estática de sites (SSG) e renderização no servidor (SSR), permitem criar aplicativos rápidos e fáceis de usar, otimizados para desempenho e SEO.

Próximas etapas em sua jornada Next.js

Agora que você construiu com sucesso seu primeiro aplicativo Next.js, é hora de levar suas habilidades para o próximo nível. Nesta próxima série de postagens, nos aprofundaremos em alguns dos recursos mais avançados do Next.js que podem aprimorar seus aplicativos e agilizar seu processo de desenvolvimento.

Middleware é um recurso poderoso que permite estender a funcionalidade do seu aplicativo adicionando lógica personalizada antes que uma solicitação seja concluída. Isso significa que você pode manipular os objetos de solicitação e resposta, autenticar usuários ou até mesmo gerenciar redirecionamentos perfeitamente.

A seguir, exploraremos a Geração de sites estáticos (SSG). Essa técnica pré-renderiza as páginas no momento da construção, permitindo velocidades de carregamento rápidas e melhor desempenho de SEO. Ao compreender como aproveitar o SSG, você pode criar aplicativos que não são apenas dinâmicos, mas também incrivelmente eficientes.

Finalmente, abordaremos API Routes, um recurso que permite criar funções sem servidor diretamente em seu aplicativo Next.js. Isso significa que você pode lidar com solicitações e respostas sem precisar de um servidor separado, facilitando o desenvolvimento de aplicativos full-stack com menos sobrecarga.

Siga-me enquanto embarcamos nesta emocionante jornada pelos recursos avançados do Next.js. Com essas ferramentas à sua disposição, você poderá criar aplicativos robustos e de alto desempenho que realmente se destacam. Fique ligado em nossa próxima postagem!

Você também pode ler esta postagem em:

Introdução ao Next.js: construindo seu primeiro aplicativo

Next.js é uma estrutura React popular que permite aos desenvolvedores criar aplicativos rápidos renderizados em servidor. Ele fornece recursos poderosos prontos para uso!

salmaniyad.hashnode.dev

Encontre-me em:

SalmanIyad · GitHub

Engenheiro de Sistemas Computacionais | Desenvolvedor Web. SalmanIyad tem 31 repositórios disponíveis. Siga o código deles no GitHub.

github.com