Managing authentication in Next.js is quite tricky, with problems such as content flashing. In this blog, I won't address the problems and explain how to solve it in detail, because I've written a blog about that in Next.js Redirect Without Flashing Content.

In this blog, I'll cover how to handle them cleanly using Higher Order Components.

The Usual Way & The Problem

Usually for the authentication in Next.js, we define routes that need to be blocked like so:

const protectedRoutes = ['/block-component', '/profile'];

Then we have a component that checks the route like this:

export default function PrivateRoute({ protectedRoutes, children }) {
  const router = useRouter();
  const { isAuthenticated, isLoading } = useAuth();

  const pathIsProtected = protectedRoutes.indexOf(router.pathname) !== -1;

  useEffect(() => {
    if (!isLoading && !isAuthenticated && pathIsProtected) {
      // Redirect route, you can point this to /login
      router.push('/');
    }
  }, [isLoading, isAuthenticated, pathIsProtected]);

  if ((isLoading || !isAuthenticated) && pathIsProtected) {
    return <FullPageLoader />;
  }

  return children;
}

This works, but there are several problems:

1. It's not colocated, the placement of authentication is not located in the page itself, instead in another component such as PrivateRoute

2. Error Prone, when you're doing route changes, for example: if you're moving the pages/blocked-component.tsx file to pages/blocked/component.tsx, you will have to change the protectedRoutes variable into the new route.

   This is quite dangerous because with the protectedRoutes variable, there are no type checking because there is no way for TypeScript to know if that's the right path. (maybe soon)

Higher-Order Component

My friend and I built a higher-order component that we can put inside the page like so:

export default withAuth(ProtectedPage);
function ProtectedPage() {
  /* react component here */
}

With this implementation, it's now colocated within the page and it won't be a problem if you change the file name.

Adding Several Types of Pages

In my experience of building simple authenticated apps, there are 3 type of authenticated pages that we need to support

For the demo, you can try it yourself on the demo page

1. Simple Protected Pages

It's for pages that need protection, such as dashboard, edit profile page, etc.

Behavior

• Unauthenticated users will be redirected to LOGIN_ROUTE (default: /login), without any content flashing
• Authenticated users will see this page in this following scenario:
  • Direct visit using link → user will see a loading page while the withAuth component checks the token, then this page will be shown
  • Visit from other pages (router.push) → user will see this page immediately

2. Authentication Pages (Login)

It's for pages such as Login and Register or any other page that suits with the behavior.

Behavior:

• Unauthenticated users can access this page without any loading indicator
• Authenticated users will be redirected to HOME_ROUTE (default: /).
  • We're assuming that authenticated users won't need to see login anymore. Instead, they should be redirected to the HOME_ROUTE.
  • It's also best to hide all links back to the login page when the users is already authenticated.

3. Optional Page

This is a more specific use case, but sometimes there are pages that you don't need to be authenticated to visit, but you still need to show the users details if they are authenticated.

Behavior:

• This page is accessible to all users
• You can get the user from useAuthStore.useUser()

Page Focus Synchronization

We also added a page focus listener. When you open several tabs, the authentication will be synced across tabs.

React.useEffect(() => {
  // run checkAuth every page visit
  checkAuth();

  // run checkAuth every focus changes
  window.addEventListener('focus', checkAuth);
  return () => {
    window.removeEventListener('focus', checkAuth);
  };
}, [checkAuth]);

Source Codes

We use Zustand to store authentication data globally

Zustand Store

import { createSelectorHooks } from 'auto-zustand-selectors-hook';
import produce from 'immer';
import create from 'zustand';

import { User } from '@/types/auth';

type AuthStoreType = {
  user: User | null;
  isAuthenticated: boolean;
  isLoading: boolean;
  login: (user: User) => void;
  logout: () => void;
  stopLoading: () => void;
};

const useAuthStoreBase = create<AuthStoreType>((set) => ({
  user: null,
  isAuthenticated: false,
  isLoading: true,
  login: (user) => {
    localStorage.setItem('token', user.token);
    set(
      produce<AuthStoreType>((state) => {
        state.isAuthenticated = true;
        state.user = user;
      })
    );
  },
  logout: () => {
    localStorage.removeItem('token');
    set(
      produce<AuthStoreType>((state) => {
        state.isAuthenticated = false;
        state.user = null;
      })
    );
  },
  stopLoading: () => {
    set(
      produce<AuthStoreType>((state) => {
        state.isLoading = false;
      })
    );
  },
}));

const useAuthStore = createSelectorHooks(useAuthStoreBase);

export default useAuthStore;

withAuth HOC Component

import { useRouter } from 'next/router';
import * as React from 'react';
import { ImSpinner8 } from 'react-icons/im';

import apiMock from '@/lib/axios-mock';
import { getFromLocalStorage } from '@/lib/helper';

import useAuthStore from '@/store/useAuthStore';

import { ApiReturn } from '@/types/api';
import { User } from '@/types/auth';

export interface WithAuthProps {
  user: User;
}

const HOME_ROUTE = '/';
const LOGIN_ROUTE = '/login';

const ROUTE_ROLES = [
  /**
   * For authentication pages
   * @example /login /register
   */
  'auth',
  /**
   * Optional authentication
   * It doesn't push to login page if user is not authenticated
   */
  'optional',
  /**
   * For all authenticated user
   * will push to login if user is not authenticated
   */
  'all',
] as const;
type RouteRole = (typeof ROUTE_ROLES)[number];

/**
 * Add role-based access control to a component
 *
 * @see https://react-typescript-cheatsheet.netlify.app/docs/hoc/full_example/
 * @see https://github.com/mxthevs/nextjs-auth/blob/main/src/components/withAuth.tsx
 */
export default function withAuth<T extends WithAuthProps = WithAuthProps>(
  Component: React.ComponentType<T>,
  routeRole: RouteRole
) {
  const ComponentWithAuth = (props: Omit<T, keyof WithAuthProps>) => {
    const router = useRouter();
    const { query } = router;

    //#region  //*=========== STORE ===========
    const isAuthenticated = useAuthStore.useIsAuthenticated();
    const isLoading = useAuthStore.useIsLoading();
    const login = useAuthStore.useLogin();
    const logout = useAuthStore.useLogout();
    const stopLoading = useAuthStore.useStopLoading();
    const user = useAuthStore.useUser();
    //#endregion  //*======== STORE ===========

    const checkAuth = React.useCallback(() => {
      const token = getFromLocalStorage('token');
      if (!token) {
        isAuthenticated && logout();
        stopLoading();
        return;
      }
      const loadUser = async () => {
        try {
          const res = await apiMock.get<ApiReturn<User>>('/me');

          login({
            ...res.data.data,
            token: token + '',
          });
        } catch (err) {
          localStorage.removeItem('token');
        } finally {
          stopLoading();
        }
      };

      if (!isAuthenticated) {
        loadUser();
      }
    }, [isAuthenticated, login, logout, stopLoading]);

    React.useEffect(() => {
      // run checkAuth every page visit
      checkAuth();

      // run checkAuth every focus changes
      window.addEventListener('focus', checkAuth);
      return () => {
        window.removeEventListener('focus', checkAuth);
      };
    }, [checkAuth]);

    React.useEffect(() => {
      if (!isLoading) {
        if (isAuthenticated) {
          // Prevent authenticated user from accessing auth or other role pages
          if (routeRole === 'auth') {
            if (query?.redirect) {
              router.replace(query.redirect as string);
            } else {
              router.replace(HOME_ROUTE);
            }
          }
        } else {
          // Prevent unauthenticated user from accessing protected pages
          if (routeRole !== 'auth' && routeRole !== 'optional') {
            router.replace(
              `${LOGIN_ROUTE}?redirect=${router.asPath}`,
              `${LOGIN_ROUTE}`
            );
          }
        }
      }
    }, [isAuthenticated, isLoading, query, router, user]);

    if (
      // If unauthenticated user want to access protected pages
      (isLoading || !isAuthenticated) &&
      // auth pages and optional pages are allowed to access without login
      routeRole !== 'auth' &&
      routeRole !== 'optional'
    ) {
      return (
        <div className='flex min-h-screen flex-col items-center justify-center text-gray-800'>
          <ImSpinner8 className='mb-4 animate-spin text-4xl' />
          <p>Loading...</p>
        </div>
      );
    }

    return <Component {...(props as T)} user={user} />;
  };

  return ComponentWithAuth;
}

For more code and implementation examples check out the code on GitHub

Attribution

• Rizqi Tsani, co-creator of this code.
• Next Auth, for the inspiration and the idea of using HOC to handle authentication.

Conclusion

This will be a great addition to your code, making it cleaner and more efficient. You should colocate your code as much as possible, and this will be a step to do that.

Originally posted on my personal site, find more blog posts and code snippets library I put up for easy access on my site 🚀

Like this post? Subscribe to my newsletter to get notified every time a new post is out!

There are two kinds of types in Swift, which are Value and Reference Types. These types and their characteristics sometimes can be hard to remember and understand. Through this post, I'll try to explain it using a mental model and analogy which will help you easily master swift types.

Primitives

If you use common programming languages (Java, JavaScript, etc) before, you must be familiar with primitives and non-primitives data types. I'm not going to jump into the details of primitives, but here are some illustrations I got from google.

Usually, primitives conclude specific data types such as boolean, char, integer, and float.

Does Swift have primitive types?

No, Swift doesn't have primitive types. In a sense. Swift still provides 'primitive-like' data types such as Int, Bool, Double, etc. However, they are made with struct.

If you look into Swift's Int type definition, you can see that it is made with a struct

Interesting right?

Quick Intro to Mental Model

A mental model is an explanation of someone's thought process about how something works in the real world. It is a representation of the surrounding world. - Wikipedia

You might be familiar with this variable box analogy:

We think of variables as containers that hold information and allow us to access them later. We will think of this as a box that has a label on it. - StudeApps

This works wonders when you are trying to understand what a variable does.

That is a mental model. You create a certain type of analogy to help you understand a concept.

The prior analogy is not a one-size-fits-all, I won't be using it to explain value & reference type. So prepare for some changes 💪

Value and Reference Types

There are two kinds of types in Swift which are Value Types, and Reference Types. Value types are usually defined as struct, enum, and tuple. Whereas the latter is usually defined as a class

Wire Analogy

I'm going to use a new mental model for variables, which uses a wire to point to the value it holds.

Therefore each variable can point to a single value according to its data type.

Value Types

A value type is a type whose value is copied when it's assigned to a variable or constant, or when it's passed to a function - Swift Docs

Remember that 'primitive' data types like Int, Double, String, etc. are made with struct. So they follow the value type mental model.

Mental Model

Let's say we have a struct of Animal (the behavior is also the same with enum, tuple, also Int, String because they're made with struct)

struct Animal {
    var legs = 4
}

var sheep = Animal()

Then, we are assigning the cow variables with the value of sheep

var cow = sheep

Key point: the value will be copied.

Effect of Copying

After we copy, the sheep and cow variables now points to two different struct. Therefore if we mutate the cow, the sheep won't get affected, and vice versa.

struct Animal {
    var legs = 4
}

var sheep = Animal()
var cow = sheep

// mutating cow's property
cow.legs = 3

print(sheep.legs) // 4
print(cow.legs) // 3

Reference Types

A reference types is where instances share a single copy of the data when they're assigned to a variable or constant, or when they're passed to a function.

In the wire analogy, it will point to the same value. We're using a class that behaves as a reference type.

Mental Model

class Animal {
    var legs = 4
}

var sheep = Animal()
var cow = sheep

Key Point: It will share a single copy

Effect of Sharing A Single Copy

I believe you already guessed correctly how it will behave. If we mutate one variable, both will be affected.

class Animal {
    var legs = 4
}

var sheep = Animal()
var cow = sheep

// mutating cow's property
cow.legs = 3

print(sheep.legs) // 3
print(cow.legs) // 3

Proof

To prove that it is sharing a single copy, we can use === (identity equality). It will return true if two reference point to the same object instance.

Let's throw in a new instance called pig

var sheep = Animal()
var cow = sheep

// created a new instance
var pig = Animal()

Here's the wire

Then we can compare them using identity equality

print(sheep === cow) // true
print(sheep === pig) // false

When in doubt, draw the wire analogy to help you. I'm using excalidraw for the illustration

Reference Types Inside of Value Types

Important thing to note is: If you are referencing a class inside of a struct, then that variable will still behave like the reference type

class Leg {
    var count = 4
}

struct Animal {
    var name: String
    var legs = Leg()
}

var sheep = Animal(name: "Sheep")
var cow = sheep

sheep.legs.count = 3

print(sheep.legs.count) // 3
print(cow.legs.count) // 3

// referencing the same class
print("\(sheep.legs === sheep.legs)") // true

Additional Emphasis

I need to emphasize this in case you're coming from a JavaScript background.

In Swift, Array and Dictionary are all value types.

It is still made with struct 😬

How to Choose?

I don't have much experience with this yet, so I'll quote an article instead

Use a value type when:

• Comparing instance data with == makes sense
• You want copies to have an independent state
• The data will be used in code across multiple threads

Use a reference type (e.g. use a class) when:

• Comparing instance identity with === makes sense
• You want to create a shared, mutable state

I believe that using value type for overall use will be sufficient. We can trust that when we change one variable/property, it won't affect the others. Thus, creating a sense of safety and reliability.

Keep a note that this difference only happens when you mutate. In absence of mutation, values and references act exactly the same way.

Functions & In-Out

Function parameter follows value types. This means you can't mutate the parameter and change the value.

Swift won't even let you mutate them. Because what is passed in the parameter will be converted into a let variable.

You can imitate reference types on function parameter by using inout

var numbers = [1,2,3]

func foo(_ arr: inout Array<Int>)  {
    arr.removeLast()
}

foo(&numbers)
print(numbers) // [1,2]

Notice the &(ampersand) which is an explicit recognition that you're aware it is being used as inout.

Under the hood, the In-Out parameter doesn't use reference types.

This behavior is known as copy-in copy-out or call by value result. For example, when a computed property or a property with observers is passed as an in-out parameter, its getter is called as part of the function call and its setter is called as part of the function return. - Swift Docs

Conclusion

You now understand that:

• Swift 'primitive-like' variables are made with a struct
• Value types will copy the value if assigned to a variable or passed into a function
• Reference types will share a single instance if assigned to a variable or passed into a function
• Mutating value types won't affect the other copy, on the other hand, mutating reference types will affect the single instance
• Function parameters follows value types, but can imitate reference types by using the in-out parameter

Originally posted on my personal site, find more blog posts and code snippets library I put up for easy access on my site 🚀

Like this post? Subscribe to my newsletter to get notified every time a new post is out!

In this flexbox tutorial we will try to understand these properties & topics

• Flex Direction
• Justify Content
• Align Items
• How Flexbox Divides its children
• Flex Grow vs Width: 100%

Flex Direction

There are 4 values for flex-direction property which are:

• column
• row
• column-reversed
• row-reversed

flexbox.help has a great interactive illustration if you want to check it out. These are all the output I reproduced:

Looking at the property's value, it is kind of confusing, because if we assign flex-direction: row it is stacked to the right.

But here is the mental model to understand and to remember it. I want you to remember that we are putting the flex-direction to the red box, not the items. According to that, we are basically telling the red box to be a single row. Think of it as an excel spreadsheet. If the red box is a single row, we can only put elements to the right, like the excel spreadsheet.

Got it?

flex-direction: column is basically the same, you are telling the red box to be a single column in a spreadsheet, then you can only add items to the bottom.

As for the column-reverse, and the row-reverse, I think you already got the hang of it, just reverse it.

Justify Content

Justify content is the property to move items around on the main axis. What is the main axis? The main axis is the direction we declare using flex-direction. For example with the same illustration on top, when we declare flex-direction: row, then the main axis is horizontal or to left-right.

Here is a great illustration from css-tricks.

The mental model I use to remember this is, Justify Content moves around items on the main axis.

I think the values of the property is very clear on the illustration.

Align Items

This is the opposite of justify-content but align-items do not have all property from justify-content. Align items work on the cross axis. Which is the opposite of our main axis.

Same with justify-content mental model, you only need to remember that Align Items work on the cross axis.

How Flexbox divide its children

We have a red box with 500px width, and 5 items with each 100px width.

with code:

<div class="red-box">
  <div class="item">
    <p>1</p>
  </div>
  <div class="item">
    <p>2</p>
  </div>
  <div class="item">
    <p>3</p>
  </div>
  <div class="item">
    <p>4</p>
  </div>
  <div class="item">
    <p>5</p>
  </div>
</div>

<style>
  .red-box {
    width: 500px;
    display: flex;
  }
  .item {
    width: 100px;
  }
</style>

I like to create a mental model where each item is requesting to the red box (which will we call Reddy for short) how much do they need.

In the beginning Reddy is 500px wide, and each items is requesting 100px.

Reddy: 500px

Request List:
1,2,3,4,5: 100px

Because Reddy has 500px space, so Reddy gives each item the requested amount, which is 100px.

Case 1: When Reddy's width is larger than the requested amount

Let's say that Reddy is 700px, Reddy will still only give the items the requested amount which is 100px and has some spare spaces.

Case 2: When Reddy's width is smaller than the requested amount

When Reddy has limited width, Reddy must give each item a fair amount of width according to the request ratio.

Now, how do we calculate the ratio? That's quite easy, we need to find the ratio of all the requests, so:

Item1 : Item2 : Item3 : Item4 : Item5 = 1 : 1 : 1 : 1 : 1

So, from the ratio, Reddy will give each items equally.

Firefox Devtool also has a nice information on how much each elements shrinks.

Now, how small will Reddy give to each item? The items really care about the content they have, they don't want the content that they bring to get shrunk into non-existent

This illustration demonstrates that items won't shrink smaller than their content size, which in this case is 35px. Shrinking to content will create overflow.

Case 3: Different Request Ratio

We already know if the ratio is 1:1:1:1:1, it will shrink the items into equal sizes, let's see how they work when the item requests are not identical.

Reddy: 700px

Request List:
1,3,5: 100px
2,4: 200px

Let's calculate the request ratio:

Item Number = Ratio
1:2:3:4:5 = 100px:200px:100px:200px:100px
simplified,
1:2:3:4:5 = 1:2:1:2:1

So, Reddy will give the items according to that list.

As we can see, when Reddy gets shrunk to 350px, the item sizes will be: 50 : 100 : 50 : 100 : 50, identical to the request ratio.

You can also force the item to not shrink according to the requested width using flex-shrink: 0 on the .item. Reddy will recognize the item as a VIP Member, and won't shrink it no matter what.

Flex Grow vs Width 100%

Using width: 100% basically will translate to 100% of the container which is 500px. By doing that, this means that width: 100% will get calculated in the request ratio which is 1:5:1.

But, using flex-grow: 1, the items will not get calculated in the request ratio, but takes the rest of whatever is left.

Summary

There you go, after I understand how flexbox actually works, working with flexbox is a breeze. I also have a blog post on how to choose between flex and grid, you might want to check it out.

Let me know if you guys have some question!

Originally posted on my personal site, find more blog posts and code snippets library I put up for easy access on my site 🚀

Like this post? Subscribe to my newsletter to get notified every time a new post is out!

Next.js has a built-in API in a single application, so choosing Next.js is a perfect choice so we don't expose our API keys.

Website Demo

1. Create an Application on Spotify Developer

• Go to Spotify Developer Website.
• Click Create An App
• Fill in App Name, App description, then Create

• Next, you will be provided with Client ID and Client Secret (Don't give this secret to anyone)

• Open edit settings, then fill out http://localhost:3000 on RedirectURIs

The first step is done! Now, you need to do authentication to get access & refresh token

2. Authenticate Your Account

To do authentication, we need to prepare CLIENT_ID and put it into this link below:

https://accounts.spotify.com/authorize?client_id=CLIENT_ID_HERE&response_type=code&redirect_uri=http
%3A%2F%2Flocalhost:3000&scope=user-read-currently-playing

example:

https://accounts.spotify.com/authorize?client_id=eaccb97f6d0e405897adf1dd80b95c01&response_type=code&redirect_uri=http
%3A%2F%2Flocalhost:3000&scope=user-read-currently-playing

Open that link in a browser, then you will get redirected into a uri, copy the website link

Example of the redirect link:

http://localhost:3000/?code=AQBeA9SD7QbA9hUfv_TfmatYxT51CY87msMnOZmMbhf7ZaxfbvG7oKEsATOJBxDyFap0Aq6uftY0v4Hq1QSy3MgQBfAHhmrifty-62rfDRlFnd0AzXRBOMpoOSA6SNw_uTPp7AixAE5zosgiIIf7efhzf1QOJfLh1HUYi248z8jk1x2jjKG2YLvMyJuP0rjB5tP5UHjoFGBvKbULpchkF6yiJHnS

code that you have is the one after (=). Don't forget to write it down.

Next we need to get authorization client that is already encrypted with base64, use this website to encrypt with the format of client_id:client_secret

For example:

Next, write down the encrypted base64

After that, open up terminal/cmd, and run this command, don't forget to change the base64 and the code to yours.

curl -H "Authorization: Basic CHANGE_BASE64_HERE"
-d grant_type=authorization_code -d code=CHANGE_CODE_HERE -d redirect_uri=http%3A
%2F%2Flocalhost:3000 https://accounts.spotify.com/api/token

*make sure the command is in one line

Example:

curl -H "Authorization: Basic ZWFjY2I5N2Y2ZDBlNDA1ODk3YWRmMWRkODBiOTVjMDE6YTQxOTVjMmQwYTQyNDM2MDllNjk3ZTYwMmU3MGI3NjI=" -d grant_type=authorization_code -d code=AQBeA9SD7QbA9hUfv_TfmatYxT51CY87msMnOZmMbhf7ZaxfbvG7oKEsATOJBxDyFap0Aq6uftY0v4Hq1QSy3MgQBfAHhmrifty-62rfDRlFnd0AzXRBOMpoOSA6SNw_uTPp7AixAE5zosgiIIf7efhzf1QOJfLh1HUYi248z8jk1x2jjKG2YLvMyJuP0rjB5tP5UHjoFGBvKbULpchkF6yiJHnS -d redirect_uri=http%3A%2F%2Flocalhost:3000 https://accounts.spotify.com/api/token

You will get a JSON like this:

{
  "access_token": "BQDKxO7h1I1wA3esGK9zCFWn97XORJEPjwAHAEIxCnDXcmy9GbEuPacquwWvpiM4d33gJVHVOP9KUxY8AXkpXc-_zRFZBfneHM2vEeV1Fbfr-0Mw94oimlNf77dRiyxPpm4IUVNLloUWgYcfkAO0",
  "token_type": "Bearer",
  "expires_in": 3600,
  "refresh_token": "AQAtxXvnzRTt4c2-2_Av2WyJQKWxUW_hMVN6QNiqv2i8A2ZElVarmvdhqyc8Pf-Z5n827FTFxTpHq5E3kOsrlRWM3TuJWxjVQsW0icR0zo3BXRFLt2FB2Qfj-pFaZwY-qc8",
  "scope": "user-read-currently-playing"
}

Example on the terminal:

what we need to write down is the refresh_token. That token will last infinitely

Now you can do the request with Next.js or another backend application

3. Creating API routes in Next.js

If you need a reference to create the app, you can check my repository. Don't forget to star it!

You can also use my nextjs-tailwind-starter by using:

npx create-next-app -e https://github.com/theodorusclarence/nextjs-tailwind-starter project-name

After all app is installed, add querystring dependency

yarn add querystring

or

npm i querystring

Next, make an api route in /pages/api/spotify.js

If you want the TypeScript version, checkout the code on GitHub

// /pages/api/spotify.js
import querystring from 'querystring';

const {
  SPOTIFY_CLIENT_ID: client_id,
  SPOTIFY_CLIENT_SECRET: client_secret,
  SPOTIFY_REFRESH_TOKEN: refresh_token,
} = process.env;

const basic = Buffer.from(`${client_id}:${client_secret}`).toString('base64');
const NOW_PLAYING_ENDPOINT = `https://api.spotify.com/v1/me/player/currently-playing`;
const TOKEN_ENDPOINT = `https://accounts.spotify.com/api/token`;

const getAccessToken = async () => {
  const response = await fetch(TOKEN_ENDPOINT, {
    method: 'POST',
    headers: {
      Authorization: `Basic ${basic}`,
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: querystring.stringify({
      grant_type: 'refresh_token',
      refresh_token,
    }),
  });

  return response.json();
};

export const getNowPlaying = async () => {
  const { access_token } = await getAccessToken();

  return fetch(NOW_PLAYING_ENDPOINT, {
    headers: {
      Authorization: `Bearer ${access_token}`,
    },
  });
};

export default async (_, res) => {
  const response = await getNowPlaying();

  if (
    response.status === 204 ||
    response.status > 400 ||
    response.data.currently_playing_type !== 'track'
  ) {
    return res.status(200).json({ isPlaying: false });
  }

  const data = {
    isPlaying: response.data.is_playing,
    title: response.data.item.name,
    album: response.data.item.album.name,
    artist: response.data.item.album.artists
      .map((artist) => artist.name)
      .join(', '),
    albumImageUrl: response.data.item.album.images[0].url,
    songUrl: response.data.item.external_urls.spotify,
  };

  res.status(200).json(data);
};

Add .env.local with authorization data that we have written (change the data below with yours)

SPOTIFY_CLIENT_ID=eaccb97f6d0e405897adf1dd80b95c01
SPOTIFY_CLIENT_SECRET=a4195c2d0a4243609e697e602e70b7
SPOTIFY_REFRESH_TOKEN=AQAtxXvnzRTt4c2-2_Av2WyJQKWxUW_hMVN6QNiqv2i8A2ZElVarmvdhqyc8Pf-Z5n827FTFxTpHq5E3kOsrlRWM3TuJWxjVQsW0icR0zo3BXRFLt2FB2Qfj-pFaZwY-qc8

Your API is ready with route: GET https://localhost:3000/api/spotify

4. Use API with Next.js

For data fetching, we can use SWR. SWR is a great library that can fetch the API periodically. SWR will do refetching each time we refocus a the window. Also, install react-icons to get the spotify logo.

yarn add swr react-icons

or

npm i swr react-icons

Add SWR in pages/index.jsx like this:

TypeScript Version

import useSWR from 'swr';

export default function Home() {
  const fetcher = (url) => fetch(url).then((r) => r.json());
  const { data } = useSWR('/api/spotify', fetcher);
  return (
    <>
      <section className='bg-gray-600'>
        <main className='flex justify-center items-center'>
          {console.log(data)}
        </main>
      </section>
    </>
  );
}

There will be 2 types of JSON data that will be sent by the Spotify API:

1. When there is no song playing

   {
     "isPlaying": false
   }
   

2. When there is a song playing

   {
     "album": "Menari Dengan Bayangan",
     "albumImageUrl": "https://i.scdn.co/image/ab67616d0000b273d623688488865906052ef96b",
     "artist": "Hindia",
     "isPlaying": true,
     "songUrl": "https://open.spotify.com/track/08OPqLv99g8avzmxQepmiw",
     "title": "Besok Mungkin Kita Sampai"
   }
   

So, we can conditionally render the data like this:

<a
  target='_blank'
  rel='noopener noreferer'
  href={
    data?.isPlaying
      ? data.songUrl
      : 'https://open.spotify.com/user/erence21?si=yTsrZT5JSHOp7tn3ist7Ig'
  }
  className='flex relative items-center p-5 space-x-4 w-72 rounded-md border transition-shadow hover:shadow-md'
>
  <div className='w-16'>
    {data?.isPlaying ? (
      <img
        className='w-16 shadow-sm'
        src={data?.albumImageUrl}
        alt={data?.album}
      />
    ) : (
      <SiSpotify size={64} color={'#1ED760'} />
    )}
  </div>

  <div className='flex-1'>
    <p className='component font-bold'>
      {data?.isPlaying ? data.title : 'Not Listening'}
    </p>
    <p className='font-dark text-xs'>
      {data?.isPlaying ? data.artist : 'Spotify'}
    </p>
  </div>
  <div className='absolute right-1.5 bottom-1.5'>
    <SiSpotify size={20} color={'#1ED760'} />
  </div>
</a>

You can check out the live deployment on spotify-playing.theodorusclarence.com

Thanks and Goodluck!

Originally posted on my personal site, find more blog posts and code snippets library I put up for easy access on my site 🚀

Like this post? Subscribe to my newsletter to get notified every time a new post is out!

When I started to learn Next.js, I got overwhelmed with the list of abbreviations that looks similar, I didn't know what it is and what is the difference. It is quite confusing because when using Create React App, we usually only use 1 strategy to fetch data from API which is using useEffect.

Next.js has many data fetching strategies. Although initially Next.js was well known to be a Server-Side Rendering Framework, it turns out that Next.js has 4 methods of Data Fetching. Here is the short explanation each so you get familiar with the abbreviation of CSR, SSR, SSG, ISR.

• CSR - Client-Side Rendering, this is the usual kind of data fetching using useEffect, it will fetch the data from the API every single page request on the client-side (after the page is rendered, then the function will run).
• SSR - Server-Side Rendering, will run a special function to fetch data from API every page request on the server-side (before the page is loaded, that special function will run first, creating a delay, then after that, it will serve the page).
• SSG - Static Site Generation, will run a special function to fetch data once when that page builds.
• ISR – Incremental Static Regeneration, this is a new thing, shortly put, a combination of SSG, and SSR, where it served statically, but at a certain time and certain condition that page will rebuild and fetch the data from the API again.

Don't worry if you didn't get that, because I will be explaining it thoroughly, just familiarize the words first.

I mentioned before that there is a special function that will run when using a specific data fetching method. Keep that in mind as I will show you what is that special function.

This code example will fetch a date-time from an API using axios, then render it on the page. It is useful to see the date-time so we can truly know when the API is hit.

Client-Side Rendering (CSR)

Special Function: useEffect

Demo Site

Code Example

export default function CSRPage() {
  const [dateTime, setDateTime] = React.useState<string>();

  React.useEffect(() => {
    axios
      .get('https://worldtimeapi.org/api/ip')
      .then((res) => {
        setDateTime(res.data.datetime);
      })
      .catch((error) => console.error(error));
  }, []);

  return (
    <main>
      <TimeSection dateTime={dateTime} />
    </main>
  );
}

Demo

Terms:

• PT → Preview Time, the time shown when the API is hit. Can be seen in the middle.
• RT → Real-Time, the real ticking time updating every second, can be seen on the right bottom corner

Video Description:

1. Page reloads on 15:46:03 Real-Time (RT), then a LOADING indicator is shown
2. After about 1s, Preview Time is showing 15:46:04(PT)

Keys to Emphasize

1. useEffect function, this function is the key indicator that a page is using Client-Side Rendering.
2. LOADING indicator, because the data fetching runs after the page is rendered, the data is not fetched instantly, therefore showing a loading state.
3. Data is fetched on every page request, which is why the time shown is different for each reloads.

Server Side Rendering (SSR)

Special Function: getServerSideProps

Demo Site

Code Example

export default function SSRPage({ dateTime }: SSRPageProps) {
  return (
    <main>
      <TimeSection dateTime={dateTime} />
    </main>
  );
}

export const getServerSideProps: GetServerSideProps = async () => {
  const res = await axios.get('https://worldtimeapi.org/api/ip');

  return {
    props: { dateTime: res.data.datetime },
  };
};

Demo

Video Description:

1. Clicked the link on 16:32:38(RT), a slight pause for 2s, then page loads showing 16:02:40(PT)

Keys to Emphasize

1. getServerSideProps function, this function is the key indicator that a page is using Server-Side Rendering.
2. DELAY before render, and no LOADING indicator, the data is fetched before the page is rendered, so there will be a slight delay where the API is being hit at the moment, then it will show the page without loading indicator
3. Data is fetched on every page request, which is why the time shown is different for each reloads.

CSR vs SSR

Here is the difference between CSR vs SSR, keep an eye on delay and loading indicators.

Video Description:

1. When clicking CSR, with no delay a LOADING text is visible for a second, then the Preview Time loads.
2. When clicking SSR, a slight delay happened, then the page loads.

Keys to Emphasize

1. CSR hit the API after the page loads.
2. SSR hit the API before the page loads.

Short addition

I will probably create a new post about the pros and cons of each method, but when using CSR the SEO is not really great because the data is only fetched after the page renders. This is useful and convenient when we are creating a page with a gated authentication, as you don't really need SEO for pages like the dashboard, edit profile page, etc.

But, for the SSR, although it creates a delay, data that was fetched is injected and helps SEO. This is quite useful for a thread or post that we need to get traffic into, like Reddit or some sort.

Static Site Generation (SSG)

Special function: getStaticProps

Demo Site

Code Example

export default function SSGPage({ dateTime }: SSGPageProps) {
  return (
    <main>
      <TimeSection dateTime={dateTime} />
    </main>
  );
}

export const getStaticProps: GetStaticProps = async () => {
  const res = await axios.get('https://worldtimeapi.org/api/ip');

  return {
    props: { dateTime: res.data.datetime },
  };
};

Demo

Video Description:

1. Preview Time is showing 13:39:36(PT). But the real-time is 16:16:59(RT), about 3 hours late.
2. Reloading and going back and forth to the home page did not change anything.

Keys to Emphasize

1. getStaticProps function, this function is the key indicator that a page is using Static Site Generation.
2. Fetched when running yarn build, the API will be hit ONLY when the application is building. This is why the time is at 13:39, while the real-time is 16:17.
3. Data will not change because no further fetch, which is why the time shown is the same for each reloads.

Incremental Static Regeneration

Special function: getStaticProps + revalidate

Demo Site

Code Example

export default function ISR20Page({ dateTime }: ISR20PageProps) {
  return (
    <main>
      <TimeSection dateTime={dateTime} />
    </main>
  );
}

export const getStaticProps: GetStaticProps = async () => {
  const res = await axios.get('https://worldtimeapi.org/api/ip');

  return {
    props: { dateTime: res.data.datetime },
    revalidate: 20,
  };
};

Demo

Disclaimer: Revalidate time is set to 20 seconds.

Video Description:

1. At first, it was 16:40:12(PT), and real-time when reloading is 16:40:25(RT) and 16:40:29(RT). In those 2 reload, Preview Time (PT) did not change.
2. Then, when 16:40:32(RT) (20s after initial), reload is done twice, the first time on 16:40:36(RT) and 16:40:40(RT). The Preview Time change to 16:40:37(PT) after the second reload.

Keys to Emphasize

Now, this is might be confusing for you, but here is the key I want you to look at.

1. When in a 20-second cooldown span–16:40:12(RT) - 16:40:32(RT), reloading doesn't trigger changes. This is because the page is in a cooldown state, as we set on the revalidate key.
2. After the 20-second cooldown–16:40:32(RT), we did 2 reloads.
   1. First Reload at 16:40:36(RT), we know that it is not on the cooldown state anymore. The first visit after the cooldown state is off, is going to trigger page rebuild. Page rebuild meaning, only this certain page is going to be rebuild. Not the whole application. The fetch API will run in the background, but there will be no changes on the Preview Time
   2. Second Full Reload at 16:40:40(RT), the Preview Time change to 16:40:37(PT). Exactly a second after the page rebuild (which means the rebuild takes about 1s). This second reload is going to serve that rebuilt page from the previous reload.

Revisiting Page vs Full Reload

Terms:

1. Revisiting pages → navigating using next/link (going back to home, then to that page again)
2. Full reload → doing reload at a website (command+r)

Video Description:

1. Revisiting pages at the first time 18:38:45(RT), will trigger rebuild, but after the second revisit, the Preview Time did not change.
2. After a full reload, then Preview Time is changed to 18:38:45(PT)

Note:

1. The first reload does not have to be a full reload, we can go back to the home page, then to that page again (revisit), it will trigger the rebuild as long as we are not in the cooldown state.
2. But, the second reload must be a full reload. Going back to the home page, then to the page again won't change the new Preview Time.

Now, this is a case where we are assuming that only 1 person is accessing the website. But, that reloads will happen every person visit while still respecting the cooldown state.

Is it going to be rebuilt every 20s then?

Nope.

When the cooldown is off, if no one visits the page, then that page will not rebuild, even after long past the 20s.

But, the first person that visits when the cooldown state is off, is going to trigger a rebuild. That person won't be seeing changes. But, the changes will be served for the next full reload.

Conclusion

That's all, folks!

If you have understood this material, I suggest you to read more about How to choose between them. I provide 4 metrics for you to consider and some example!

Originally posted on my personal site, find more blog posts and code snippets library I put up for easy access on my site 🚀

Like this post? Subscribe to my newsletter to get notified every time a new post is out!

Storybook is a great way to maintain and preview isolated components. I usually add it as a 'nice-to-have' feature. During set up, I found that the resource about setting up a storybook with Next.js and Tailwind CSS is scarce. There are a bunch of bugs, and finding the solution is like finding a needle in a haystack. Hopefully, this tutorial can help you set it up smoothly.

Version

This step-by-step tutorial is written with Storybook v6.4.9 & TypeScript, if you found the tutorial is not working after some minor update, please leave a comment below.

Initializing Storybook

This command will install the storybook to your Next.js repository, there will be a prompt asking if you want to additionally install an eslint plugin, I suggest you accept.

npx -y sb init --builder webpack5

Installing PostCSS Add-ons

Tailwind CSS needs PostCSS to work, so we need to integrate it with Storybook using one of their pre-built add-ons.

yarn add -D @storybook/addon-postcss

Adding Webpack as a resolution dependency

We need this to ensure the webpack is installed as a dependency, somehow this will cause a bug if we don’t install it

Append this to your package.json

// package.json

"resolutions": {
    "webpack": "^5"
}

Then install the webpack resolutions with

yarn

Replace .storybook/main.js

Here is the custom main.js config that you can use

// .storybook/main.js

const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  staticDirs: ['../public'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    {
      /**
       * NOTE: fix Storybook issue with PostCSS@8
       * @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
       */
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  core: {
    builder: 'webpack5',
  },
  webpackFinal: (config) => {
    /**
     * Add support for alias-imports
     * @see https://github.com/storybookjs/storybook/issues/11989#issuecomment-715524391
     */
    config.resolve.alias = {
      ...config.resolve?.alias,
      '@': [path.resolve(__dirname, '../src/'), path.resolve(__dirname, '../')],
    };

    /**
     * Fixes font import with /
     * @see https://github.com/storybookjs/storybook/issues/12844#issuecomment-867544160
     */
    config.resolve.roots = [
      path.resolve(__dirname, '../public'),
      'node_modules',
    ];

    return config;
  },
};

I've provided some comments about the bug fixes with the link.

Confirm the stories and staticDirs if they match up with your folder structure. By specifying staticDirs we can use assets from public folders.

Replace .storybook/preview.js

// .storybook/preview.js

import '../src/styles/globals.css';
import * as NextImage from 'next/image';

const OriginalNextImage = NextImage.default;

Object.defineProperty(NextImage, 'default', {
  configurable: true,
  value: (props) => <OriginalNextImage {...props} unoptimized />,
});

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  previewTabs: {
    'storybook/docs/panel': { index: -1 },
  },
};

I like the docs panel to be the default so I added the previewTabs config. You can remove it if you want.

This file will load the Tailwind CSS from globals.css and mock NextImage to work with Storybook.

Running the storybook

Run yarn storybookto start up the dev server.

Then you can start adding some story, here is an example

Story example

// src/components/buttons/__stories__/Button.stories.tsx

import { ComponentMeta, ComponentStory } from '@storybook/react';
import * as React from 'react';
import { HiSearch } from 'react-icons/hi';

import Button from '@/components/buttons/Button';

export default {
  title: 'Components/Buttons/Button',
  component: Button,
  argTypes: {
    children: {
      control: { type: 'text' },
    },
  },
} as ComponentMeta<typeof Button>;

const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;

export const Default = Template.bind({});
Default.args = {
  children: 'Button',
  variants: 'primary',
};

export const WithIcon = Template.bind({});
WithIcon.args = {
  children: (
    <div className='flex gap-2 items-center'>
      <HiSearch />
      <span>Search</span>
    </div>
  ),
};

Type Definition

type ButtonProps = {
  /** Button children element */
  children: React.ReactNode;
  /** Show loading spinner and disable button */
  isLoading?: boolean;
  /** Button color variant */
  variants?: 'primary' | 'secondary';
  /** Disable the button and add not-allowed cursor */
  disabled?: boolean;
} & React.ComponentPropsWithoutRef<'button'>;

If you are using TypeScript, you can directly add JSDoc to the type definition, and it will automatically generate the props description 🤯

Screenshot

Awesome.

Deploying on Vercel

To deploy on Vercel, you need to create a separate deployment with your Next.js page, then add this custom configuration

Hate config? Use my starter & expansion

This is a battery-packed starter with installable expansion just by using a single command in the terminal.

Check out the ts-nextjs-tailwind-starter!

Storybook Expansion

I created this expansion to easily configure the project, this will do all of the above tutorials, suitable to be used with my starter, you probably can use it to an existing project. No promise ✌

curl -s https://raw.githubusercontent.com/theodorusclarence/expansion-pack/main/storybook/trigger.sh | bash -s

Expansion pack repository

Plop Generator

The expansion pack is also equipped with a plop generator to easily create a storybook file for your component

{% youtube t-MnpB7rOhg %}

Originally posted on my personal site, find more blog posts and code snippets library I put up for easy access on my site 🚀

Like this post? Subscribe to my newsletter to get notified every time a new post is out!

I made the ts-nextjs-tailwind-starter after I got tired of setting up a new project and have to initialize Tailwind CSS every single time. After some months, this starter has grown and is filled with a lot of development automation and tools that help me when I'm developing.

This is something that I use every project init, features are carefully curated, and put into this repository.

Features

According to my list, these are all the features that I incorporate on ts-nextjs-tailwind-starter:

• ⚡️ Next.js 12
• ⚛️ React 17
• ✨ TypeScript
• 💨 Tailwind CSS 3 — Configured with CSS Variables to extend the primary color
• 💎 Pre-built Components — Components that will automatically adapt with your brand color
• 🃏 Jest — Configured for unit testing
• 📈 Absolute Import and Path Alias — Import components using @/ prefix
• 📏 ESLint — Find and fix problems in your code, also will auto-sort your imports
• 💖 Prettier — Format your code and Tailwind CSS classes consistently
• 🐶 Husky & Lint Staged — Run scripts on your staged files before they are committed
• 🤖 Conventional Commit Lint — Make sure you & your teammates follow the conventional commit
• ⏰ Standard Version Changelog — Generate your changelog using yarn release
• 👷 Github Actions — Lint your code on PR
• 🚘 Automatic Branch and Issue Autolink — Branch will be automatically created on issue assigned, and auto-linked on PR
• 🔥 Snippets — A collection of useful snippets
• 👀 Default Open Graph — Awesome open graph generated using og.thcl.dev, fork it, and deploy!
• 🗺 Site Map — Automatically generate sitemap.xml
• 📦 Expansion Pack — Easily install common libraries, additional components, and configs

Quite a lot huh? I'm going to take an in-depth look at each feature and automation with this post.

Easy Initial Config

Don't you hate it when you use a starter, then you see some branding or default configs left out unchanged?

I prepared a unique word that you can find, with some guide of what to override. You can remove the comments after you override them, and leave them if you haven't. Treat them as a to-do comment.

Pre-built Components

I prepared a set of components that is neutral and can be used to help boost your speed in development. These are components that have a high chance of being used, not just getting deleted after you finished cloning the repository.

All animations are configured to be motion-safe.

Don't like the theme?

You can change it with CSS Variables. I prepared all Tailwind CSS colors converted to CSS Variables in the styles/colors.css file that you can copy and use.

See more details about components on the demo page

SEO Enhancement

Do you want your project to be indexed to search engines? Yeah, me too. I optimized the SEO by preparing a custom Seo component and adding next-sitemap.

If you want to use the default meta tag, just add <Seo /> on top of your page.

You can also customize it per page by overriding the title, description as props

<Seo title='Next.js Tailwind Starter' description='your description' />

or if you want to still keep the site title like %s | Next.js Tailwind Starter, you can use templateTitle props.

Minimal Dependencies

I tried to keep the dependencies small, not the devDeps tho, you'll see why after you see a bunch of automation I create. Here are the 3 dependencies (excluding Next.js and React deps)

1. clsx, a utility for constructing className strings conditionally.
2. react-icons, easily import popular icon packs in SVG format.
3. tailwind-merge, override tailwind CSS classes without using !important.

The tailwind-merge can be used by importing clsxm from @/lib/clsxm. All of the pre-built components are using clsxm to ease the use of the reusable components.

Here is a thread that I made about tailwind-merge:

Absolute Import & Path Alias

import Header from '../../../components/Header';

// simplified to

import Header from '@/components/Header';

Reduce the complexity of importing components by using absolute import, and a nice path alias to differentiate your code and external libraries.

Prettier with Tailwind CSS Class Sorter

In this repository, I set it up so it will automatically sort class based on the custom config file. It even works with clsx or classnames! You don't need to ask your colleague to download another VS Code extension. All of it is bound to the repository.

ESLint

This repository is prepared with ESLint to reduce human errors during development. Don't worry there won't be any annoying styling lint because all of it is taken care of with Prettier. Some cool features such as:

Auto Import Sort & Unused Import Removal

Don't you hate it when you have to revise your code because your reviewer told you to reorder imports? If they haven't automated it, do yourself a favor by recommending this starter.

Husky & Lint Staged

There are 3 Husky hooks that will help you with the automation of:

1. pre-commit, run eslint check with 0 tolerance to warnings and errors and format the code using prettier
2. commit-msg, run commitlint to ensure the use of the Conventional Commit for commit messages
3. post-merge, running yarn every git pull or after merging to ensure all new packages are installed and ready to go

Oh right, you also don't have to wait that long because husky only the code that you stage (using lint-staged).

What about the type check, or if the staged code made the other fail? Don't burden your efficiency, just chuck it into Github Actions to run in the background.

Github Actions

I love automation and I put some useful workflows that you can use.

Type Check, Whole ESLint & Prettier

For the sake of efficiency, we don't run whole project checks on your local machine. That takes too long just to commit simple changes. We will run it on Github Actions instead, then you can continue working while waiting for it to complete.

Here are the complete lists that will be checked:

1. ESLint - will fail if there are any warnings and errors
2. Type Check - will fail on tsc error
3. Prettier Check - will fail if there are any formatting errors
4. Test - will fail if there are any test failures

Github also provides useful inline warnings in the Files Changed tab on the PR.

Auto Create Branch

We can automatically create a branch from the latest main branch after you assign an issue.

This will create a consistent branch name with the issue number in front of them, and some issue context.

p.s. You have to install the app for your organization/account/repository from the GitHub Marketplace for this to work

Auto Link PR to Issue

We automated the branch creation, the lint & the test process on the PR, what's next? Yep, linking PR to issue. That is super annoying and I always forgot to do it. We'll automate it using our consistent branch name.

It also provides a nice description of related issues, so your reviewer can check the issue first before reviewing.

Open Graph Generator

I also provided an open graph application that you can fork and deploy to vercel for free. It is automatically used with the SEO component and will generate a dynamic open graph based on the page title and description.

It defaults to my deployment, but please fork it and self-host. Because I might change the API without notice and could break your app's opengraph.

You can play around with the API on og.thcl.dev. You can even customize it with your own brand based on the repo!

Snippets

Snippets are crucial if you want to make a consistent convention across the application. I prepared some snippets that can help you code faster and more effectively.

See more detail on this file

Regions

You might notice the #region with green highlight comments. This is something that can be used with reg snippets. You can easily separate your logic into named regions, then fold them if they are insignificant.

The lesser noise the better. You can also use ⌘K + ⌘8 to fold all regions.

Snippets Wrap

This is something that I recently added because it is annoying to wrap a component with React Fragment or refactoring className with clsx. So I created a snippet pattern called Snippets Wrap that can help you with that.

Expansion Pack

I have to keep this starter minimal, but there are some libraries that I often use in every project. So I created a bash script to install, config, and add additional components to this starter.

Currently, there are some packs in the expansion-pack repository

• React Hook Form + Form Input Components
• Storybook
• Cypress + workflow to run on Vercel preview on push
• Toast with React Query / SWR
• Dialog Manager with Zustand
• NProgress

Here is a demo for the React Hook Form one

Hit the terminal then grab some coffee. You're back with complete components also a sandbox page to see how to implement the library.

For more demo, check out the repository readme

Star the repository

Liking the features? This repository basically grows with me, so the features will go through changes and improvement. If you got anything in mind, leave a comment below, or open a discussion.

Finally, I would be thrilled if you give a star to the repository.

Originally posted on my personal site, find more blog posts and code snippets library I put up for easy access on my site 🚀

Like this post? Subscribe to my newsletter to get notified every time a new post is out!