Construindo um site do zero com Next.js
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
- VSCode instalado.
- Github instalado.
- Node 12.22.0 ou maior instalado.
Criando um projeto Next.js
- Vá para o terminal e digite “cd ~” ou “cd”, qualquer um funciona. Isso deve nos levar ao nosso diretório raiz.
- Cria uma pasta “www”
mkdir www
e depois entre dentro da pastacd www
, em seguida digitenpx create-next-app@latest --typescript
, se isso não funcionar verifique a documentação de instalação do Next.js. - Perceba que a etapa acima é uma parte importante do processo e que você não pode seguir em frente até ter uma pasta criada.
- 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 …”.
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.
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.
Agora vamos entender alguns arquivos do projeto.
- 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.
- 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. - 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
. - 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>;
}
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;
Ao visualizar o http://localhost:3000, você vai visualizar está página:
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.
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