Características
Exportação estática não há necessidade de aprender uma nova estrutura. Exportar um site estático com o Next.js é tão fácil quanto um único comando.
Css-in-JS o Next.js vem com ‘styled-jsx’ incluído, mas também funciona com todas as soluções Css-in-Js que voce conhece e adora.
A Pré-renderização dos aplicativos React gerados estaticamente e renderizados pelo servidor nunca foram tão fáceis.
Configuração
Recomendamos criar um novo aplicativo Next.js. usando create-next-app, que configure tudo automaticamente para você. Para criar um projeto, execute:
- npx create-next-app
- # or
- yarn create next-app
Após a conclusão da instalação, siga as instruções para iniciar o servidor de desenvolvimento. Tente editar pages/index.jse veja o resultado no seu navegador.
Quer aprender React.js na prática? Clique aqui para saber como.
Configuração manual
Instalar next, reacte react-domem seu projeto:
- npminstall next react react-dom
Abra package.jsone adicione o seguinte scripts:
- “scripts”:{
- “dev”:”next”,
- “build”:”next build”,
- “start”:”next start”
- }
Esses scripts se referem aos diferentes estágios do desenvolvimento de um aplicativo:
- dev- Executa o nextque inicia o Next.js no modo de desenvolvimento
- build- Executa o next buildque constrói o aplicativo para uso em produção
- start- Executa o next startque inicia um servidor de produção Next.js.
O Next.js foi criado com base no conceito de páginas. Uma página é um Reagir componente exportado a partir de um .js, .jsx, .ts, ou .tsxarquivo no pagesdiretório.
As páginas são associadas a uma rota com base no nome do arquivo. Por exemplo, pages/about.jsé mapeado para /about. Você pode até adicionar parâmetros de rota dinâmicos com o nome do arquivo.
Crie um pagesdiretório dentro do seu projeto.
- Preencha ./pages/index.jscom o seguinte conteúdo:
- function HomePage() {
- return <div>Welcome to Next.js!</div>
- }
- export default HomePage
Para começar a desenvolver seu aplicativo, execute npm run dev. Isso inicia o servidor de desenvolvimento http://localhost:3000.
Visite http://localhost:3000para visualizar seu aplicativo.
Até agora, obtemos:
- Compilação e empacotamento automáticos (com webpack e babel)
- Reagir a atualização rápida
- Geração estática e renderização do lado do servidor de./pages/
- Serviço de arquivo estático . ./public/está mapeado para/
Além disso, qualquer aplicativo Next.js. está pronto para produção desde o início, leia mais em nossa documentação de Implantação .
Quer aprender React.js na prática? Clique aqui para saber como.
