Next.JS

Introdução

Next.JS e um framework React logo ele e uma camada acima do React, a maior parte do tempo você vai estar usando React, porém ele fornece algumas features que facilitam a nossa vida como programador.

Uma das principais características e que ele transcende o front-end se tornando um framework back-end e front-end, onde você vai estar rodando um servidor Node.JS no back-end e uma aplicação React no front-end ao mesmo tempo. Tornando assim possível usar o SSR (Server Side Render).

Pratica

Agora vamos para a pratica, vamos criar um template Next.JS usando o template com TypeScript.


npx create-next-app --example with-typescript-eslint-jest curso-next
# or
yarn create next-app --example with-typescript-eslint-jest curso-next

Esse e o repositório do Next.JS com vários exemplos.

vercel/next.js

Visit https://nextjs.org/learn to get started with Next.js. Visit https://nextjs.org/docs to view the full documentation. Next.js is used by the world's leading companies. Check out the Next.js Showcase to learn more. The Next.js community can be found on GitHub Discussions, where you can ask questions, voice ideas, and share your projects.

https://github.com/vercel/next.js

Usando o comando yarn dev você vai iniciar o servidor de desenvolvimento no seu computador. Ele vai mostrar para você na primeira página o conteúdo do arquivo index.tsx que esta na pasta pages.

Essa e a primeira funcionalidade do Next.JS que se chama Folder based routing ou seja as rotas são guiadas pelas pastas e arquivos do seu diretório.

to do...