Como criar um projeto em Next.js

Neste tutorial, você verá:

✔️ Criar um projeto usando o Next.js;

📌 Simplifique seu processo de deploy com o nosso painel ICP!

Este tutorial orienta você na criação de um aplicativo simples utilizando o Next.js, um framework React que facilita a construção de aplicações web modernas. Seguindo os passos abaixo, você poderá configurar e executar seu próprio projeto Next.js.

📌 Passo 1: Configurar o arquivo package.json

{
  "name": "integrator-host-nextjs",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "prepare": "node setup.js",
    "dev": "NODE_NO_WARNINGS=1 next dev",
    "build": "npm run prepare && next build",
    "start": "npm run prepare && next build && node index.js"
  },
  "dependencies": {
    "next": "13.0.0",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

• name: Nome do seu projeto.​
• version: Versão atual do projeto.​
• private: Define se o projeto é privado.​
• scripts: Conjunto de comandos que podem ser executados via linha de comando.​
  • prepare: Executa o script setup.js para preparar o ambiente.​
  • dev: Inicia o servidor de desenvolvimento do Next.js.​
  • build: Prepara o ambiente e constrói o projeto para produção.​
  • start: Prepara o ambiente, constrói o projeto e inicia o servidor.​
• dependencies: Lista de dependências do projeto e suas versões específicas.​

📌 Passo 2: Criar o arquivo setup.js

// setup.js
const fs = require('fs');
const path = require('path');

// Caminho para o diretório `pages`
const pagesDir = path.join(__dirname, 'pages');

// Verifica se a pasta `pages` existe, e cria se não existir
if (!fs.existsSync(pagesDir)) {
  fs.mkdirSync(pagesDir);
  console.log('Pasta `pages` criada com sucesso.');
}

// Cria um arquivo `index.js` básico dentro da pasta `pages` se não existir
const indexPath = path.join(pagesDir, 'index.js');
if (!fs.existsSync(indexPath)) {
  fs.writeFileSync(indexPath, `export default function Home() {
    return (
      <div>
        <h1>Bem-vindo ao Next.js!</h1>
        <p>Esta é a sua página inicial.</p>
      </div>
    );
  }`);
  console.log('Arquivo `index.js` criado com conteúdo básico.');
}

• Verifica se a pasta pages existe na raiz do projeto; caso contrário, cria essa pasta.​
• Dentro da pasta pages, verifica se o arquivo index.js existe; se não existir, cria um arquivo básico com um componente React que renderiza uma mensagem de boas-vindas.

📌 Passo 3: Criar o arquivo index.js para o servidor

// index.js
const next = require('next');
const http = require('http');

// Configure o ambiente (desenvolvimento ou produção) e a porta
const dev = process.env.NODE_ENV !== 'production';
const port = process.env.PORT || 3060;
const app = next({ dev });
const handle = app.getRequestHandler();

// Prepare o Next.js
app.prepare().then(() => {
  // Crie o servidor HTTP
  const server = http.createServer((req, res) => {
    handle(req, res);
  });

  // Inicie o servidor na porta especificada
  server.listen(port, (err) => {
    if (err) throw err;
    console.log(`> Servidor rodando em http://localhost:${port}`);
  });
});

• Importa os módulos necessários: next para o framework e http para criar o servidor.​
• Define o ambiente (dev) e a porta (port) em que o servidor irá rodar.​
• Prepara a aplicação Next.js e, após a preparação, cria e inicia o servidor HTTP que lida com as requisições.​

📌 Passo 4: Rodar a aplicação.

Instalar todas as dependências:

npm install

Inicie o projeto:

npm run start

Acessar ele localmente:

http://localhost:3060