How to Use SupaBase to Power NextJS web app

There is one request from a friend/customer for me to build a simple agenda website. These are the requirements, (nothing is hard here)

• Mobile First
• Users are able to view and scroll to view the agenda, when they click the link, the will be redirected to the detailed part
• A few UI requirements (font, font-size, color etc)

Repeat myself again, nothing is hard. The only concern here is:

• How to deliver it fast,
• At the same time to have a good Flexibility to have changes,
• And have a very goof Performance

JAMStack is quite popular, to gain better flexibility, Headless CMS could be used. For having even better flexibility, I decided to use a BaaS here. (Read more about Comparison between BaaS and JAMStack) SupaBase is one of the stable and popular option. It is a BaaS powered by PostgresDB, with Real time feature and AWS S3 compatible Storage Service.

React/NextJS is the front-end stack I have been used for years, it is popular and have very good performance, especially with NextJS Server Side Rendering + Vercel Edge Computing

Vercel (aka Zeit), is the company behind NextJS, it is a dev friendly front-end application host platform. With build-in extra features, such as CDN, edge computing, pipeline, Github integration etc.

Back-end => SupaBase

Supabase has many regions to choose when set up a new project. It has a free tier for users with 2GB Bandwidth and 500Mb DB Storage, not a big amount, but it is more than enough for an single agenda web application.

If each request is going through the Supsbase, the free tier resources will be easy to be gone. Next.js is used here to solve the problem. More about SupaBase Pricing

Front-end => Next + Vercel

Basides the famous SSR (Server Side Rendering) feature of NextJS, it supports SSG (Static Site Generation) as a Static Content Generator Framework. SSG it will request only once when the site is build, which it will save a lot of Bandwidth of Supabase.

Other Tips

Tips to use SupaBase for free

Supabase has one limit for the free pricing plan users.

Free projects are paused after 1 week of inactivity.

How to bypass weekly inactivity pause of Supebase?

The solution I have for this is to use Github Schedule Action to consume the supabase project 3 days a week.

# .github/workflows/Health.ymlname: Health Checkon:  schedule:    # every Mon, Wed, Fri    - cron: "30 5 * * 1,3,5"jobs:  build:    runs-on: ubuntu-latest    steps:    - name: Ping the Ping      run: wget https://xxxxxx.vercel.app/api/ping 

In the yaml code above for github action config, it requires an API/Ping endpoint which connnect to Supabase.

// ping.tsexport default function handler(  req: NextApiRequest,  res: NextApiResponse<Data>) {  MyPingFunction().then((data)=> {    res.status(200).json({ result: 'Echo' })  }).catch((e)=>{    res.status(500).json({ result: 'error, not healthy' })  })}

How to avoid to avoid external reference of a public image

There are always some images, they are better to not have a public url.
This could be solved as an signed url (with expiration date) like how AWS S3 manage this.

Actually, there is another way to solve it.

To to store the image as string.

Please note, users are still able to view and download images.

to generate base64 string as a file:

openssl base64 -in <infile> -out <outfile>

Summary

References:

• Supabase
• AWS S3 Compatible Storage API
• NextJS
• Vercel

Tech Tim (@TechTim42)Follow

Learn, Share and Grow => Passionate about Dev Experience Improvement, Software Engineering and Cloud Architecture.