Aula prática de Next.js para iniciantes

Neste tutorial, vamos aprender sobre Next.js, uma popular ferramenta de desenvolvimento web que permite criar aplicações web de forma fácil e eficiente. Este tutorial é destinado a iniciantes que estão interessados em aprender sobre Next.js e como começar a usá-lo na prática.

O que é Next.js?

Next.js é um framework de desenvolvimento web para React. Ele permite criar aplicações web de forma rápida e eficiente, sem muita configuração. Next.js é muito popular entre os desenvolvedores web devido à sua simplicidade e facilidade de uso.

Next.js oferece várias funcionalidades úteis, como renderização do lado do servidor, carregamento automático de módulos, roteamento dinâmico e muito mais. Ele também é altamente extensível, o que significa que você pode facilmente adicionar funcionalidades personalizadas à sua aplicação.

Passo 1: Instalação

Antes de começar a usar Next.js, é necessário instalar o Node.js em seu computador. Node.js é uma plataforma de desenvolvimento que permite executar JavaScript do lado do servidor. Você pode baixar o Node.js em seu site oficial e seguir as instruções de instalação.

Depois de instalar o Node.js, abra o terminal e crie um novo projeto Next.js usando o seguinte comando:

npx create-next-app my-next-app

Isso criará um novo projeto Next.js chamado "my-next-app" em um diretório com o mesmo nome. Após a criação do projeto, navegue até o diretório do projeto usando o comando cd my-next-app.

Passo 2: Estrutura do projeto

Dentro do diretório do projeto, você encontrará a seguinte estrutura de arquivos e pastas:

• pages/: Esta pasta contém os arquivos JavaScript que representam as páginas da sua aplicação. Cada arquivo nesta pasta corresponde a uma rota da aplicação. Por exemplo, pages/index.js representa a rota raiz da aplicação.
• public/: Esta pasta contém os arquivos estáticos da aplicação, como imagens, fontes e outros recursos.
• styles/: Esta pasta contém os estilos globais da aplicação, como CSS ou Sass.
• components/: Esta pasta contém os componentes reutilizáveis da aplicação.

Passo 3: Criando páginas

Agora, vamos criar nossa primeira página Next.js. Dentro da pasta pages, crie um novo arquivo chamado about.js e adicione o seguinte código:

import React from 'react';

const AboutPage = () => {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page of my Next.js app.</p>
    </div>
  );
};

export default AboutPage;

Este código cria uma nova página chamada AboutPage que exibe um título e um parágrafo de texto. Para acessar esta página, basta navegar para http://localhost:3000/about no seu navegador.

Passo 4: Adicionando estilos

Next.js suporta estilização de componentes usando CSS, Sass, Less e outros pré-processadores. Para adicionar estilos à nossa página AboutPage, crie um novo arquivo chamado about.module.css na pasta styles e adicione o seguinte código:

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

h1 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

p {
  font-size: 16px;
  color: #666;
}

Em seguida, importe o arquivo de estilos no arquivo about.js usando o seguinte código:

import React from 'react';
import styles from '../styles/about.module.css';

const AboutPage = () => {
  return (
    <div className={styles.container}>
      <h1>About Page</h1>
      <p>This is the about page of my Next.js app.</p>
    </div>
  );
};

export default AboutPage;

Agora, os estilos serão aplicados à nossa página AboutPage.

Passo 5: Navegação

Next.js suporta navegação entre páginas usando o componente Link do React. Vamos adicionar um link para a página AboutPage na página index.js. Atualize o código da página index.js para o seguinte:

import React from 'react';
import Link from 'next/link';

const HomePage = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <p>Welcome to my Next.js app!</p>
      <Link href="/about">
        <a>About</a>
      </Link>
    </div>
  );
};

export default HomePage;

Agora, ao clicar no link "About", você será direcionado para a página AboutPage.

Conclusão

Neste tutorial, aprendemos sobre Next.js e como começar a usá-lo na prática. Criamos uma nova aplicação Next.js, adicionamos páginas, estilos e navegação entre páginas. Next.js é uma ferramenta poderosa e muito usada na comunidade de desenvolvimento web, e esperamos que este tutorial tenha lhe fornecido uma introdução sólida ao framework. Experimente criar mais páginas, adicionar estilos e explorar os recursos avançados do Next.js para aprofundar seus conhecimentos. Divirta-se codificando!