Can Next.js Be Used on a TWA (Trusted Web Activity)?

by | Mar 27, 2025 | Technology

As progressive web apps (PWAs) become more common, developers are looking for ways to integrate them with Trusted Web Activity (TWA) to create seamless, app-like experiences on Android. But can Next.js be used on a TWA? The answer is yes, but with some considerations.

In this guide, we’ll explore how Next.js can be used with TWA, its benefits, and the steps needed to implement it.

What is a Trusted Web Activity (TWA)?

A Trusted Web Activity (TWA) is a way to launch a PWA inside an Android app using Chrome Custom Tabs. Unlike a regular web browser experience, a TWA provides:

✅ Full-Screen Web Experience – No browser UI elements (like address bars) are shown.
✅ App-Like Behavior – Feels like a native app but loads a web-based PWA.
✅ Service Worker Support – Allows offline functionality and caching.
✅ Fast Load Times – Uses Chrome’s rendering engine for optimal performance.
✅ Google Play Store Compatibility – TWAs enable PWAs to be published on the Play Store.

Can Next.js Be Used on a TWA?

Yes! Next.js can be used with a Trusted Web Activity (TWA), but the key requirement is ensuring that your Next.js app is PWA-compliant. This means:

  1. Adding a Web App Manifest

    • A web app manifest (manifest.json) is required for a TWA.

    • It defines the app name, icons, theme colors, and display mode.

  2. Enabling a Service Worker for Offline Support

    • Next.js doesn’t include a service worker by default, but you can add one using the next-pwa plugin.

    • This ensures your app works offline and meets TWA’s requirements.

  3. Deploying Your Next.js App with HTTPS

    • TWA requires the web app to be served over HTTPS.

    • Hosting providers like Vercel, Cloudflare Pages, or Netlify can handle this easily.

  4. Handling Navigation Correctly

    • Since Next.js uses client-side navigation, ensure that your TWA implementation properly supports deep links.

How to Set Up a Next.js App for TWA

1. Install and Configure next-pwa for PWA Support

bash
npm install next-pwa

Then, modify your next.config.js file:

javascript
const withPWA = require('next-pwa');

module.exports = withPWA({
pwa: {
dest: 'public',
register: true,
skipWaiting: true,
},
});

2. Add a manifest.json File

Create a public/manifest.json file:

json
{
"name": "My Next.js PWA",
"short_name": "NextPWA",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}

3. Create a Simple Android TWA Wrapper

You can use Bubblewrap, Google’s official tool for TWA, to package your Next.js PWA as an Android app.

  1. Install Bubblewrap:

    bash
    npm install -g @bubblewrap/cli

  2. Initialize the TWA project:

    bash
    bubblewrap init

  3. Build and generate the APK:

    bash
    bubblewrap build

  4. Sign the APK and upload it to the Play Store.

Why Use Next.js for a TWA?

✅ Better SEO – Since Next.js supports Server-Side Rendering (SSR), it improves search rankings.
✅ Fast Performance – Next.js provides automatic code splitting and image optimization.
✅ PWA Capabilities – With next-pwa, you get offline support, caching, and installability.
✅ Easy Deployment – Next.js apps can be deployed on Vercel, Netlify, or Firebase Hosting.

Final Thoughts

Yes, Next.js can be used with TWA, making it possible to create an SEO-friendly, fast, and app-like experience for Android users. By enabling PWA features, adding a service worker, and deploying over HTTPS, you can successfully integrate Next.js with Trusted Web Activity and publish your app on the Google Play Store.

×
Sign in
Sign up

Sign In

Sign Up