Primeiros Passos com Next.js: Um Guia para Iniciantes
Introdução
Next.js tem ganhado muita atenção nos últimos anos como um framework React que permite uma série de funcionalidades avançadas, como Server-Side Rendering (SSR), Static Site Generation (SSG) e muito mais, com uma configuração inicial mínima. Se você é novo no mundo de Next.js, este post irá ajudá-lo a dar seus primeiros passos.
Instalação
Antes de começar, você precisará ter Node.js e npm instalados em sua máquina. Depois de instalados, crie um novo projeto Next.js usando o seguinte comando:
npx create-next-app meu-projeto-next
Estrutura de Diretório
Ao criar um novo projeto, você verá uma estrutura de diretório como esta:
javaCopy codemeu-projeto-next/
├── pages/
│ ├── _app.js
│ └── index.js
├── public/
└── package.json
O que cada diretório faz?
pages/: Este diretório contém todos os componentes da página. O roteamento é baseado nos nomes dos arquivos aqui.public/: Diretório para servir arquivos estáticos como imagens, favicons, etc.package.json: O arquivo que contém as dependências e scripts do projeto.
Hello, Next.js!
Vamos começar com algo simples. Abra o arquivo pages/index.js e substitua seu conteúdo por:
export default function Home() {
return (
<div> <h1>Hello, Next.js!</h1> </div>
)
}
Inicie seu servidor Next.js com:
npm run dev
Abra seu navegador e acesse http://localhost:3000. Você deve ver a mensagem "Hello, Next.js!".
Rotas e Navegação
Criar novas rotas em Next.js é tão simples quanto adicionar novos arquivos na pasta pages. Por exemplo, para criar uma página "Sobre", você pode adicionar um arquivo chamado about.js na pasta pages com o seguinte conteúdo:
const About = () => {
return <h1>Sobre nós</h1>;
};
export default About;
Agora você pode acessar essa página em http://localhost:3000/about.
Componentes Dinâmicos e SSR
Next.js também faz Server-Side Rendering uma brincadeira de criança. Vamos supor que você queira mostrar uma lista de posts que são buscados de uma API. Você pode fazer algo como:
export async function getServerSideProps() {
const res = await fetch('https://api.exemplo.com/posts');
const posts = await res.json();
return {
props: {
posts,
},
};
}
const Blog = ({ posts }) => {
return (
<ul> {posts.map((post) => ( <li key={post.id}>{post.title}</li> ))} </ul>
);
};
export default Blog;
Conclusão
Este é apenas um vislumbre do que você pode fazer com Next.js. O framework tem muitas outras funcionalidades, como geração de sites estáticos, suporte para API REST e GraphQL, e muito mais. É uma ferramenta poderosa que pode tornar seu desenvolvimento web significativamente mais eficiente.
Esperamos que este post tenha lhe dado uma boa introdução ao Next.js. Há muito mais a explorar e aprender!
