Construindo um site do zero com Next.js

Next.js by Vercel

Se você está tentando criar um site de portfólio já faz muito tempo. Mas prometeu a si mesmo que faria isso em um dia inteiro de codificação, mas toda vez que tenta começar, acaba vasculhando a documentação, fica entediado ou continua o vídeo do youtube que estava assistindo antes de tentar.

Bem, hoje é seu dia de sorte. Estarei mostrando um passo a passo para configurar a estrutura inicial do seu site pessoal através do uso de Next.js.

Não vou entrar muito em detalhes, vou simplesmente passar por uma visão geral básica de como configurar seu aplicativo Next.js e fornecer uma configuração básica inicial e uma página do site.

Pré-requisitos

1. VSCode instalado.
2. Github instalado.
3. Node 12.22.0 ou maior instalado.

Criando um projeto Next.js

1. Vá para o terminal e digite “cd ~” ou “cd”, qualquer um funciona. Isso deve nos levar ao nosso diretório raiz.
2. Cria uma pasta “www” mkdir www e depois entre dentro da pasta cd www , em seguida digite npx create-next-app@latest --typescript , se isso não funcionar verifique a documentação de instalação do Next.js.
3. Perceba que a etapa acima é uma parte importante do processo e que você não pode seguir em frente até ter uma pasta criada.
4. Tudo o que você deve fazer neste momento é simplesmente digitar o nome do projeto. Um monte de dependências deve ser instalado e, na parte inferior, deve haver um “Success! Created …”.

Instalação com sucesso no terminal

Muito bem, agora temos um projeto Next.js criado, vamos abrir o projeto no VSCode, primeiro temos que acessar a pasta do projeto com o comando cd www , ao entrar dentro da pasta do projeto, digita o comando code . , esse comando faz o VSCode abrir listando os arquivos do seu projeto da pasta atual.

Projeto aberto no VSCode

Voltando ao terminal, vamos iniciar o projeto com o comando npm run dev , esse comando vai iniciar um servidor local em nodejs.

Abra o seu navegador favorito e digite http://localhost:3000 e parabéns, você vai visualizar a página inicial do seu projeto.

Página inicial

Agora vamos entender alguns arquivos do projeto.

1. O package.json contém todas as dependências que você está usando, portanto, quando você quiser adicionar um novo pacote que deseja usar, é importante usar o comando npm install para que ele possa adicionar a dependência ao seu arquivo JSON automaticamente.
2. O index.js encontrado dentro da pasta pagesé o arquivo onde está o código fonte da sua página inicial. Uma boa prática de codificação seria planejar seu site com antecedência para saber quais páginas você deseja criar, em seguida, usar seu index.js como ponto de partida para chamar outras páginas.
3. A pasta styles é onde os arquivos de estilos CSS vão está. Ao adicionar um respectivo arquivo CSS para um determinado componente, é prática comum fazer “nome do componente”.module.css e colocá-lo dentro desta pasta styles .
4. A pasta pages é onde serão criados as páginas da sua aplicação, por exemplo o arquivo about.tsx vai ser o arquivo da rota http://localhost:3000/about.

Agora vamos editar a página principal, colocar um link para outra página, para te mostrar como é simples desenvolver site com o Next.js.

Criando a página

Vamos criar a about.tsx dentro da pasta pages , usando este código:

export default function About() {
    return <h1>Sobre o projeto</h1>;
}

Página about.tsx criada

Não é necessário ficar reiniciando o servidor no terminal para cada página criada, o próprio servidor de desenvolvimento já identifica novos arquivos e faz isso automático.

Agora vamos criar o link da página About, dentro do index.tsx usando o componente de <Link /> do próprio Next.js, esse componente é responsável pelas transições entre página do seu projeto.

Alterando o index.tsx

Agora vamos remover algunas linhas do código do arquivo index.tsx, para que seja mais simples o seu entendimento.

A primeira que iremos fazer é importar o Link do “next/link”, usando o seguinte importador.

import Link from "next/link";

Com esse “import”, já conseguiremos usar o componente de <Link> do Next.js, para definir nossas rotas.

Agora vamos alterar o index.tsx, para o seguinte código:

import Link from "next/link";
import styles from "../styles/Home.module.css";
const Home = () => {
  return (
      <div className={styles.container}>
          <main className={styles.main}>
              <h1 className={styles.title}>Página inicial</h1>
              <h3>
                  <Link href="/about">
                      <a>Sobre o projeto</a>
                  </Link>
              </h3>
         </main>
      </div>
  );
};
export default Home;

Arquivo index.tsx alterado

Ao visualizar o http://localhost:3000, você vai visualizar está página:

Nova página inicial com o link sobre o projeto

Agora ao clicar no link Sobre o projeto, você vai se direcionado a página de Sobre o projeto, onde está o código fonte do arquivo about.tsx.

Página Sobre o projeto.

Página Sobre o projeto

Neste ponto, entender as relações entre index.js, arquivos CSS e arquivos de componentes não deve ser muito difícil e bastante intuitivo. As únicas lacunas que podem estar faltando neste momento na criação de seu aplicativo são HTML e CSS.

Parabéns!! 🎉

Você criou e desenvolveu o seu primeiro projeto com Next.js. Recomendo que iniciei o desenvolvimento do seu site pessoal usando o Next.js, você vai começar a entender o por que esse framework é incrivel.

Documentação: https://nextjs.org/docs/getting-started
Criando páginas: https://nextjs.org/docs/basic-features/pages
Otimização de Imagens: https://nextjs.org/docs/basic-features/image-optimization
Next.js + Typescript = ❤️: https://nextjs.org/docs/basic-features/typescript
Testes automatizados: https://nextjs.org/docs/testing

Github

newerton - Overview

Linkedin

https://www.linkedin.com/in/newerton/pt/