Hi everyone! I'm starting a weekly write-up for accumulating everything that I'm learning in the week. In first week, we'll talk about Browser Storage and it's implementation in Next.js, Husky (pre-commit build test automation) and Railway.app.

So, let's start with the Browser Storage methods:

Browser Storage:

1. Cookies: Small pieces of data stored by the browser on the user's device. Cookies are often used for tracking user preferences, session management, and other purposes. They can be either first-party (associated with the domain of the website being visited) or third-party (associated with a different domain).

2. Session Storage: A type of web storage that is available only during the current browser session. Data stored in session storage is accessible only as long as the browser or tab is open. Once the user closes the tab or browser, the session storage data is cleared.

3. Local Storage: Similar to session storage, but the data persists even after the browser is closed and reopened. Local storage provides a larger storage capacity compared to session storage, and the data remains available until explicitly cleared by the website or the user.

While the Cookies can be handled on both "client-side" and "server-side", Session Storage and Local Storage can be only used on the "client-side".

Read More: The Different Types of Browser Storage | by Albin Issac | Better Programming

How to Implement Cookies in Next.JS? The EASY WAY!

The "easiest way" to implement cookies in Next.JS is by using "cookies-next" library.

This library utilizes the in-built "cookies" library of Next.JS and make it work without any hassle of server-actions or route-handlers.

Pros of Using "cookies-next":

• can be used on the client side.

  It is possible to manipulate cookies on client-side with the library without any worries.

• can be used for server-side rendering in getServerSideProps, if you're still using page router.

• can be used in API handlers.

• can be used in Next.js 13+

Read More:

• Functions: cookies | Next.js (nextjs.org)

• Utilizing Local and Session Storage in Next.js: A Guide - Javascript (copyprogramming.com)

Husky: The Easiest Way to Optimize Git Hooks

Husky is an essential tool for verifying the commits before pushing them to the live deployment. Husky configurations allows us to run commands for processes like listing, testing, formatting, and creating a test build.

Musky not only improves the commit experience but also saves a lot of time by automating the build process during commits and push commands.

How to use Husky with Next.js?

Enabling "pre - commit” hook in git repository

We can install Husky with just a single command and that would eventually take around 10-15 secs for the complete process.

pnpm dlx husky-init && pnpm install

The command will create a pre-commit file in the /.husky folder with the configurations. Here's a configuration for using Husky with Next.JS

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

echo "✅ Running pre-commit hook"
# echo "🔃 Running prettier"
# pnpm run format:fix
# echo "✅ Prettyfied! Time to lint!"
echo "🔃 Running lint"
pnpm run lint
echo "✅ Crap Cleared! Time to build!"
echo "Running build"
pnpm run build
echo "✅ Build complete!"
echo "✅ Pushing to git!"
# Path: .husky/pre-push

Prettier: The code formatting tool you need!

Prettier allows us to keep the format of the code same across the codes of multiple developers. It supports almost All common languages including Javascript, Typescript, Python, Golang and HTML, CSS.

Along with the support for languages, Prettier can be directly installed on the IDE and configured for the whole project.

Prettier can be configured with Husky to make sure your code is formatted correctly before it is committed to the GitHub repository.

Read More: NextJs TypeScript setup with Prettier, Husky

Railway.app: Fastest way to deploy backend applications online.

Railway.app is an infrastructure as a service platform which provides us the access to the managed databases like MongoDB and Postgres along with power of running highly scalable infrastructure of Docker containers and other scalable solutions.

You can deploy the applications with a couple of clicks and your application will be live within 10-15 minutes.

Listmonk

Listmonk is the open-source self-hosted newsletter and transactional emails manager that allows you to use any SMTP Email Service with built-in support of AWS SES (https://aws.amazon.com/ses/). It is developed by Dr. Kailash Nadh (https://github.com/knadh), CTO @ Zerodha.

It includes several features like Mailing Lists, Analytics, Transactional Emails, Email Templating, and a lot more.

Other than emailing features, Listmonk goes very easy on the CPU, while other applications require up to 2v core CPU & up to 1Gig of RAM, Listmonk can send more than 200K emails with less than 100mb of RAM.

Coming to the best part, we can also deploy the Listmonk application on Railway.app.

The conclusion!

So, that was it for the first episode, in the next episode, we'll cover some expects for automation, CMS and some coding essentials for JavaScript frameworks. In the mid-week, I'm also planning to rewrite a guide on framework so let's see how it goes, I'll try to be consistent as much as I can.

Thanks!