search

gevuong / minimal-i18n-with-app-router

Building the marketing site so it's deployable to GPages @virufy. It's statically exported, supports build time image optimization and internationalized routing with App Router.
https://gevuong.github.io/minimal-i18n-with-app-router/
MIT License
0 stars 5 forks source link
internationalization javascript nextjs nodejs react tailwindcss typescript

readme

Decoding hidden patterns in COVID-19 coughs with AI

Virufy is a nonprofit research organization developing artificial intelligence (AI) technology to screen for COVID-19 from cough patterns, rapidly and at no cost through use of a smartphone. To learn more or get involved, visit our website.

Technologies

Challenges

Deploying to Github Pages

By default, Next.js uses Node to run applications. Github Pages on the other hand, does not support Node and is designed to host only static HTML pages and assets. Therefore, the Next.js app needed to be statically exported, but that came with its own challenges.

  1. Static exports does not support internationalized routing with Pages Router.

    • The project we adopted used Pages Router. After spending a decent amount of time replacing Pages Router with App Router, then deploying to Github Pages without success, I went ahead and built a new Next.js app from the ground up with App Router, and ensured it was deployable to GPages from the start.
    • Next, the webpages from the former project were migrated to this repo.

  2. Static exports does not support image optimization at build time.

    • When a site is statically generated, Next.js will serve unoptimized images, and only do so when the image enters the viewport. This led to extremely slow page load times and network requests that downloaded MBs of data.
    • Although image optimization through next/image can be used with static export, it required using a custom image loader and a service like Cloudinary to optimize images. We wanted to keep the project simple and not have to rely on another third party service unless we had to.
    • We used next-image-export-optimizer to optimize all static images (excluding icons and logos) at build time, which converted all JPG and PNG files to the modern WEBP format. This significantly reduced image size and page load times.
    • For example, a 1.25MB background JPG file was reduced to 47KB WEBP file. Content download times reduced from 9.2s to 1.17s, and Largest Content Paint (LCP) reduced from 6.3s to 2s.

Run Locally

  1. Install all dependencies.

    npm i

  2. Start the development server

    npm run dev

  3. Open http://localhost:3000/en with your browser to see the home page.

Build

To simulate a production build locally, run the following:

npm run build

Note: Before pushing any changes, I recommend building the app locally to make sure it passes without errors. Pushing changes and solely relying on the deployment process to catch build errors can use up limited cloud resources provided by Netlify's free plan. Plus, building locally first can promote green software development practices.

Deployment Workflow

When a PR is made against the production branch, main, a Netlify deploy preview is generated to display the PR changes on the website.

Once the PR is merged, a deploy to Github Pages is auto-triggered.

Current Workflow

Note: To properly view the preview site, append the locale /en to the deploy preview url provided by Netlify.