Cómo crear una aplicación con Next.js Expo y React Native

Introducción

Next.js es un marco de JavaScript creado por Zeit. Le permite crear aplicaciones web de renderizado estáticas y del lado del servidor utilizando React. Es una gran herramienta para crear un sitio web. Tiene muchas características y beneficios que pueden hacer de Nextjs su primera opción para crear su próxima aplicación web.

El uso de Next.js con Expo le permitirá renderizar en el lado del servidor su aplicación Universal Expo cuando se esté ejecutando en el navegador.

Esta guía le mostrará el método recomendado para usar módulos Expo SDK con herramientas Next.js.

Cree una aplicación universal con Next.js y Expo

En este enfoque, utilizará SSR (Server Side Rendering) para la web en su proyecto universal. Esta es la forma recomendada porque le brinda acceso completo a las funciones de Expo y Next.js.

SSR es una técnica utilizada para mejorar los tiempos de carga de la página percibidos.

En un escenario sin SSR, la aplicación React aparece como un conjunto de archivos estáticos. De esta manera, los pasos (más o menos) ocurren antes de que el usuario pueda ver la primera representación de la aplicación.

Instale expo-cli si aún no está instalado:

npm i -g expo-cli

Inicie su nuevo proyecto con Expo, usando el siguiente comando:

expo init --template blank

Ingrese a la carpeta del proyecto recién creado, con el comando cd:

cd my-app

Instale el adaptador (adaptador) con yarn, o puede usar npm:

yarn add @expo/next-adapter

npm i --save @expo/next-adapter

Agregue soporte a Next.js:

yarn next-expo

Inicie el proyecto:

yarn next dev

Abra su navegador y conéctese a su dirección IP: http://INDIRIZZO_IP:3000/ para ver su proyecto.

Debería ver una pantalla como la siguiente:

Ahora puede comenzar a editar el proyecto y usar Expo SDK.

Cree una compilación de Android e iOS

Vimos cómo crear una aplicación de ejemplo universal simple. Ahora veamos algunos pasos simples sobre cómo crear una compilación para Android e iOS con la configuración predeterminada.

Navegue a la carpeta del proyecto recién creada y abra el archivo app.json

Agregue las siguientes líneas de código para Android e iOS:

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

Entonces, el resultado final de nuestro app.json será el siguiente:

{
 "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
 }
 }
 }

Para crear una compilación para Android, escriba el siguiente comando desde la terminal:

expo build:android

Para crear una compilación para iOS, desde la terminal, escriba el siguiente comando:

expo build:ios

Cree una aplicación solo web con Next.js y Expo

Este enfoque es útil si solo desea utilizar componentes de Expo en su proyecto web.

Crea un proyecto:

npx create-next-app

Instale el adaptador con yarn o usando npm:

yarn add @expo/next-adapter

npm i --save @expo/next-adapter

Agregue soporte para Next.js:

yarn next-expo

Inicie el proyecto con:

yarn next dev

Abra su navegador y conéctese a su dirección IP: http://INDIRIZZO_IP:3000/ para ver su proyecto.

Estructura de archivo

Aquí está la estructura de archivo recomendada para un proyecto de Expo con soporte 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`)

Conclusión

Para obtener la guía más actualizada, es necesario consultar la documentación de Expo: Next.js.

Para ver otros tutoriales sobre Expo, consulte la siguiente sección: