DEV Community

Tech Tim (@TechTim42)
Tech Tim (@TechTim42)

Posted on

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)

dev

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.

zeit vercel a clock

Back-end => SupaBase

create project in 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.

supabase dashboard

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

use Next in front-end

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.yml
name: Health Check
on:
  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 
Enter fullscreen mode Exit fullscreen mode

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

// ping.ts
export 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' })
  })
}
Enter fullscreen mode Exit fullscreen mode

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 use Base64 to store the image as string.

use base64 as img src

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

to generate base64 string as a file:

openssl base64 -in <infile> -out <outfile>
Enter fullscreen mode Exit fullscreen mode

Summary

References:




twitter

Top comments (1)