Projeto criado para a Imersão React Next.JS da Alura, que ocorreu entre 25 e 29 de Janeiro de 2021.
npx create-next-app --example with-styled-components
: Cria um novo projeto com o template Styled Components.npm run dev
ouyarn dev
: Inicia a aplicação em modo de desenvolvimento.- https://imersao-react-nextjs.guidb.vercel.app
npm install
ouyarn install
: Instala/atualiza as dependências do projeto, gerando a famigeradanode_modules
.npm run eslint:init
ouyarn eslint:init
: Inicializa a configuração doeslint
. Para esse projeto, utilizaremos as configurações:To check syntax, find problems, and enforce code style
,JavaScript modules (import/export)
,React
,No
,Browser
,Use a popular style guide
,Airbnb
,JavaScript
eYes
.npm run lint
ouyarn lint
: Roda olint
em seu projeto, analisando seu código e corrigindo o que ele consegue.
Ctrl + Shift + P
e digiteeslint fix all
: Corrige seu código automaticamente.
npm install prop-types
: Biblioteca que realiza validações de tipagem.
- Ótima forma de "debugar"/visualizar os seus dados na página (no meio do JSX):
<pre>
{JSON.stringify(question, null, 4)}
</pre>
- Se você criar um diretório chamado
api/
dentro do diretóriopages/
o Next.js configura os arquivos desse diretório em um Lambda Server, que disponibiliza um endpoint que qualquer um poderá consumir. - Ex.:
import db from '../../db.json';
export default function (request, response) {
response.json(db);
}
npm install framer-motion
: Biblioteca que facilita a implantação de animações em sua página.npm install @crello/react-lottie
: Biblioteca que .
- A principal função do Next.js é resolver a parte de roteamento da aplicação.
- Se você exportar uma função assíncrona chamada
getServerSideProps
de uma página, o Next.js vai pré-renderizar essa página em cada request utilizando os dados retornados pela função.
export async function getServerSideProps(context) {
return {
props: {}, // will be passed to the page component as props
}
}