How to Use SupaBase to Power NextJS Web App
Tags: tutorial, jamstack, nextjs, supabase
Published: 2022-10-11 04:12:22

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9pqbrbvyo8z8tu0uzx7.png)



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][1]) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6tuu5yv134fh50shl6pe.png)





## Back-end => SupaBase

![create project in supabase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4q7hj6scn2pppplfhg0h.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzvmertg3hds38vh0ogx.png)


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][2]

## Front-end => Next + Vercel

![use Next in front-end](https://media.giphy.com/media/vzO0Vc8b2VBLi/giphy.gif)

Basides the famous SSR (Server Side Rendering) feature of NextJS, it supports SSG (Static Site Generation) as a Static Content Generator Framework. [SSG](https://nextjs.org/docs/basic-features/data-fetching/get-static-props) 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. 

```yaml
# .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 
```
In the yaml code above for github action config, it requires an `API/Ping` endpoint which connnect to Supabase.

```typescript
// 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' })
  })
}
```

### 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](https://stackoverflow.com/a/63017265/5249708) to solve it.

To [use Base64](https://superuser.com/questions/120796/how-to-encode-base64-via-command-line) to store the image as string.


![use base64 as img src](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ou2w9cauaxx12pce7vf3.png)

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



**to generate base64 string as a file:**
```shell
openssl base64 -in <infile> -out <outfile>
```


## Summary


**References:**
[1]:https://www.philstat.org.ph/special_issue/index.php/MSEA/article/download/324/320
[2]:https://supabase.com/pricing

- [Supabase](https://supabase.com/pricing)
- [AWS S3 Compatible Storage API](https://github.com/supabase/storage-api)
- [NextJS](https://nextjs.org/)
- [Vercel](https://vercel.com/)



---
{% embed https://dev.to/timhub %}
[![twitter](https://res.cloudinary.com/practicaldev/image/fetch/s--opAxX3tY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.shields.io/badge/Twitter-1DA1F2%3Fstyle%3Dfor-the-badge%26logo%3Dtwitter%26logoColor%3Dwhite)](https://twitter.com/TechTim42)