Desenvolvimento de aplicativos com Next.js e Electron

Desde a introdução do Node.js, as tecnologias básicas da web (HTML, CSS e JavaScript) cresceram tanto que agora podemos construir aplicativos multidispositivos/multiplataformas com elas. Esse grande desenvolvimento também resultou na introdução de frameworks e bibliotecas, o que simplificou ainda mais nosso trabalho. Next.js e Electron são exemplos significativos nesta lista.

Neste artigo, exploraremos o Nextron, um pacote que combina os recursos poderosos do Next.js e do Electron para nos permitir criar aplicativos de desktop em várias plataformas da maneira mais fácil e conveniente de todos os tempos.

Abordaremos as seguintes seções:

Pré-requisitos

Os seguintes pré-requisitos são necessários com este guia:

• Conhecimento de JavaScript
• Conhecimento básico de linha de comando/terminal
• Experiência anterior com Next.js e Electron pode ajudar, mas não é necessária

Configurando seu projeto Nextron

Você pode criar facilmente um novo aplicativo Nextron executando:

npx create-nextron-app appName

A Nextron também oferece vários exemplos de modelos que suportam TypeScript, bem como estruturas CSS populares, como Tailwind CSS, Ant Design, Material UI e Emotion. Tudo modelos podem ser encontrados aquie depois de decidir o que escolher para o seu projeto, você pode instalá-los adicionando um prefixo ao comando de instalação para o exemplo de modelo desejado junto com --example bandeira. Portanto, se você quiser usar os modelos TypeScript e Tailwind, precisará executar:

npx create-nextron-app appName --example with-typescript-tailwindcss

A execução do comando de instalação criará todos os arquivos e diretórios necessários para nosso projeto. Porém, ainda precisaremos instalar todas as dependências necessárias com o comando abaixo:

npm install
# OR
yarn

Feito isso, podemos iniciar nossa aplicação com:

npm run dev
# OR
yarn dev

Isso abrirá imediatamente uma nova janela para nosso aplicativo, conforme mostrado na imagem abaixo:

Você também pode fechar a ferramenta de desenvolvimento para poder acessar o aplicativo em tela cheia.

Estrutura de arquivos para o projeto Nextron

Embora possa haver pequenas alterações, principalmente dependendo do modelo de exemplo escolhido durante a instalação, a estrutura de arquivos para um projeto Nextron típico é a seguinte:

E como você deve ter notado, todo o código relacionado ao Next.js está dentro /render mapa. Alguns outros arquivos e diretórios com os quais você pode não estar familiarizado incluem:

• main/helpers – Este diretório exporta um módulo chamado createWindowque usa o Electron BrowserWindow uma função para criar janelas do nosso aplicativo de desktop. Aqui podemos configurar as opções padrão da janela do aplicativo, como seu tamanho inicial e posição
• main/background.js – Este arquivo está onde está createWindow a função é inicializada e é responsável por servir nosso aplicativo Next.js como um aplicativo Electron
• resources/ – Aqui podemos colocar os recursos de nossos aplicativos de desktop, como ícones de aplicativos

Como o Nextron funciona

É muito fácil entender como a Nextron funciona nos bastidores. Verifica automaticamente se seu aplicativo está sendo executado no modo de desenvolvimento ou produção. Se estiver no modo de desenvolvimento, o Nextron pega a URL do host local gerada pela execução do aplicativo Next.js e o serve como um aplicativo Electron. No entanto, se estiver em produção, o Nextron pega os arquivos estáticos gerados a partir da compilação Next.js e os gera.

Páginas

As páginas funcionam exatamente da mesma maneira que no aplicativo Next.js padrão, sem exceção. Vamos tentar coisas, fazer novas sample.js arquivo dentro renderer/pages diretório com o seguinte conteúdo:

import Link from "next/link";

const sample = () => {
  return (
    <>
      <div>
        <h1>Hello world</h1>
        <p>Welcome to sample page</p>
        <Link href="https://blog.logrocket.com/home">
          <a>Go Home</a>
        </Link>
      </div>
    </>
  );
};

export default sample;

E também atualizar por padrão home.jsx arquivo no mesmo diretório que o conteúdo abaixo, para que ele seja vinculado à nossa nova página:

import Link from "next/link";

const Home = () => {
  return (
    <>
      <h1>Hello World</h1>
      <p>Welcome to my Nextron desktop app</p>
      <Link href="https://blog.logrocket.com/sample">
        <a>Go to sample page</a>
      </Link>
    </>
  );
};

export default Home;

Temos os seguintes resultados:

Como usar layouts

Os layouts funcionam exatamente como no aplicativo Next.js normal, sem exceção. Por exemplo, suponha que temos uma barra de navegação que queremos compartilhar em várias páginas em nosso aplicativo de desktop. Primeiro, precisaremos criar nosso arquivo de layout; por exemplo, novo layout.js arquivo dentro /renderer diretório com o seguinte conteúdo:

const Layout = ({ children }) => {
  return (
    <>
      <nav>
        <h2>Nav Logo</h2>
        {/* more navbar code here */}
      </nav>
      <main>{children}</main>
    </>
  );
};

export default Layout;

E como o Nextron não liga automaticamente _app.js o arquivo, que de outra forma viria com o aplicativo criado com o pacote create-next-app, teremos que criá-lo manualmente e incluir nosso layout:

//_app.js
import Layout from "../layout";

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

Com um pouco de CSS aplicado na barra de navegação e nas páginas que geramos anteriormente, obteremos os seguintes resultados:

Fazendo novas janelas

Embora o uso disso seja muito incomum, também é possível criar novas janelas programaticamente. Normalmente usaríamos Electron BrowserWindow para conseguir isso, mas a Nextron já está exportando um método auxiliar chamado createWindow para nós, que podemos usar em seu lugar.

Suponha que queremos abrir /sample a página que criamos anteriormente em uma nova janela. Precisamos atualizar primeiro main/background.js para ativar o suporte para esta nova janela:

import { app, ipcMain } from "electron";
. . .

  const mainWindow = createWindow("main", {
    width: 1000,
    height: 600,
  });
  const sampleWindow = createWindow("sample", {
    width: 700,
    height: 400,
    show: false,
  });

  if (isProd) {
    await mainWindow.loadURL("app://./home.html");
    await sampleWindow.loadURL("app://./sample.html");
  } else {
    const port = process.argv[2];
    await mainWindow.loadURL(`http://localhost:${port}/home`);
    await sampleWindow.loadURL(`http://localhost:${port}/sample`);
  }

  ipcMain.on("show-sample", () => {
    sampleWindow.show();
  });
. . .

No código acima, imediatamente após a criação mainWindowestamos criando outra janela (sampleWindow), definindo sua largura e altura iniciais para 700 × 400 e também definindo o valor de exibição para false então esta janela não é visível por padrão. E usando o Electron ipcMain event emitterouvimos o evento show-sampleentão quando este evento é transmitido, mostramos um novo sampleWindow.

O próximo passo seria transmitir programaticamente este evento, e também podemos fazer isso facilmente com o ipc na página. Por exemplo, em render/home.jsx:

import electron from "electron";
const ipcRenderer = electron.ipcRenderer || false;

const Home = () => {
  const openWindow = () => {
    ipcRenderer.send("show-sample");
  };

  return (
    <>
      <h1>Hello World</h1>
      <p>Welcome to my Nextron desktop app</p>
      <button onClick={openWindow}>Open sample page</button>
    </>
  );
};

export default Home;

Se executarmos nossa aplicação, teremos a seguinte saída:

Além disso, podemos abrir uma URL externa em uma nova janela adicionando target=_blank atributos ou usando JavaScript window.open() método para abrir o URL de destino.

APIs eletrônicas

APIs baseadas em navegador e APIs Electron também funcionam bem, e você pode importá-las diretamente para qualquer página. Um exemplo é a API de notificação do navegador, que podemos usar em uma página como a abaixo:

const showNotification = () => {
  const notificationTitle = "My Notification 🔔";

  new Notification(notificationTitle, {
    body: "This is a sample notification.",
  }).onclick = () => console.log("Notification Clicked");
};

E toda vez que realizamos uma ação que aciona showNotification função, receberemos imediatamente uma notificação na área de trabalho. Aqui está um exemplo de notificação para macOS:

Criando um aplicativo de demonstração

Depois de terminar de codificar seu aplicativo, você definitivamente desejará gerar um arquivo executável para poder compartilhar o aplicativo com outras pessoas. Nextron resolve isso com construtor de elétrons. Podemos gerar um arquivo executável para nosso projeto Nextron com o comando abaixo:

npm run build
# OR
yarn build

Você também pode atualizar a seção de script em seu package.json arquivo que inclui outras opções de criação:

. . .
{
  "scripts": {
    "build": "nextron build",
    "build:all": "nextron build --all",
    "build:win32": "nextron build --win --ia32",
    "build:win64": "nextron build --win --x64",
    "build:mac": "nextron build --mac --x64",
    "build:linux": "nextron build --linux"
  }
}

Então, se quisermos gerar um arquivo executável para Windows 64 bits, usaremos o seguinte comando:

npm run build:win64
# OR
yarn build:64

Conclusão

Neste artigo, analisamos o Nextron, um pacote JavaScript que nos permite criar aplicativos de desktop sem esforço com Electron e Next.js. Analisamos a criação de novas páginas, a aparência do aplicativo, novas janelas, usando a API Electron e, finalmente, gerando arquivos executáveis ​​para seu aplicativo.