Come creare un App con Next.js Expo e React Native

Introduzione

Next.js è un framework JavaScript creato da Zeit. Ti consente di creare applicazioni Web statiche e di rendering lato server utilizzando React. È un ottimo strumento per costruire il un sito Web. Ha molte funzionalità e vantaggi, che possono rendere Nextjs la tua prima opzione per creare la tua prossima applicazione web.

L'uso di Next.js con Expo ti consentirà di eseguire il rendering server-side della tua app Expo universale quando è in esecuzione nel browser.

Questa guida ti mostrerà il metodo raccomandato per utilizzare i moduli di Expo SDK con gli strumenti di Next.js.

Creare un app universale con Next.js ed Expo

In questo approccio utilizzerai SSR (Server Side Rendering) per il web nel tuo progetto universale. Questo è il modo consigliato perché ti dà pieno accesso alle funzionalità di Expo e Next.js.

SSR è una tecnica utilizzata per migliorare i tempi di caricamento della pagina percepiti.

In uno scenario non SSR, l'app di React viene visualizzata come un insieme di file statici. In questo modo i passaggi (più o meno) avvengono prima che l'utente possa vedere il primo rendering dell'app.

Installa expo-cli se non è ancora installato:

npm i -g expo-cli

Avvia il tuo nuovo progetto con Expo, utilizzando il seguente comando:

expo init --template blank

Entra nella cartella del progetto appena creato, con il comando cd:

cd my-app

Installa l'adapter (adattatore) con yarn, oppure è possibile utilizzare npm:

yarn add @expo/next-adapter

npm i --save @expo/next-adapter

Aggiungi il supporto a Next.js:

yarn next-expo

Avvia il progetto:

yarn next dev

Apri il browser e collegati al tuo indirizzo IP: http://INDIRIZZO_IP:3000/ per vedere il tuo progetto.

Dovresti visualizzare una schermata come la seguente:

Ora puoi iniziare a modificare il progetto e utilizzare Expo SDK.

Creare una build Android e iOS

Abbiamo visto come creare una semplice app universale di esempio. Vediamo adesso pochi semplici passaggi su come creare una build per Android e iOS con le impostazioni di default.

Accedere alla cartella del progetto appena creato e aprire il file app.json.

Aggiungi le seguenti righe di codice per Android e iOS:

...
    "ios": {
      "bundleIdentifier": "com.yourcompany.yourappname",
      "buildNumber": "1.0.0"
    },
    "android": {
      "package": "com.yourcompany.yourappname",
      "versionCode": 1
    }
...

Quindi il risultato finale del nostro file app.json sarà il seguente:

{
  "expo": {
    "name": "my-app",
    "slug": "my-app",
    "platforms": [
      "ios",
      "android",
      "web"
    ],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "bundleIdentifier": "com.yourcompany.yourappname",
      "buildNumber": "1.0.0"
    },
    "android": {
      "package": "com.yourcompany.yourappname",
      "versionCode": 1
    }
  }
}

Per creare una build per Android, da terminale digitare il seguente comando:

expo build:android

Per creare una build per iOS, da terminale digitare il seguente comando:

expo build:ios

Creare un app solo per web con Next.js ed Expo

Questo approccio è utile se si desidera utilizzare solo componenti Expo nel proprio progetto Web.

Crea un progetto:

npx create-next-app

Installa l'adapter (adattatore) con yarn oppure utilizzando npm:

yarn add @expo/next-adapter

npm i --save @expo/next-adapter

Aggiungi il supporto Next.js:

yarn next-expo

Avvia il progetto con:

yarn next dev

Apri il browser e collegati al tuo indirizzo IP: http://INDIRIZZO_IP:3000/ per vedere il tuo progetto.

Struttura dei file

Ecco la struttura di file consigliata per un progetto Expo con supporto Next.js.

Expo Next.js
├── pages -> Routes
│    └── index.tsx -> Entry Point for Next.js
│    └── _document.js -> The wrapper element for a page, used for normalizing styles like React Native.
├── .next -> Generated Next.js files (should be ignored)
├── assets -> All static assets for your project
├── App.tsx -> Entry Point for Mobile apps
├── app.json -> Expo config file
├── next.config.js -> Next.js config file
└── babel.config.js -> Babel config (should be using `@expo/next-adapter/babel`)

Conclusione

Per la guida più aggiornata è necessario fare riferimento alla documentazione Expo: Next.js.

Per altri tutorial riguardanti Expo, vedere la seguente sezione: