INSTALLATION.md

INSTALLATION

Table of contents

• INSTALLATION
  • Table of contents
  • Packages
    • Next.js
    • Supabase CLI
    • Supabase Auth
    • Tailwind CSS
    • Shadcn UI
    • Shadcn UI - Time Picker
    • Shadcn UI - Emblor
    • Internationalization (i18n)
    • Schema Validation
    • Redux Toolkit
    • SWR
    • PWA (Progressive Web Apps)
    • Nodemailer
    • Ckeditor 5
  • Utilities

Packages

Next.js

Prompts:

• Would you like to use TypeScript? Yes
• Would you like to use ESLint? Yes
• Would you like to use Tailwind CSS? Yes
• Would you like to use src/ directory? No
• Would you like to use App Router? (recommended) Yes
• Would you like to customize the default import alias (@/*)? No
• What import alias would you like configured? @/*

npx create-next-app@latest . --typescript

Set the current Node.js version.

node -v > .nvmrc

Start the development server.

npm run dev

Supabase CLI

Supabase CLI. Manage postgres migrations, run Supabase locally, deploy edge functions. Postgres backups. Generating types from your database schema.

npm install supabase --save-dev

Updating the Supabase CLI.

npm update supabase --save-dev

Login with your Personal Access Token:

npx supabase login

Generate types without init.

npx supabase gen types typescript --project-id "YOUR_PROJECT_ID" --schema public > types/supabase.ts

Generate types with init.

npx supabase init
npx supabase link --project-ref YOUR_PROJECT_ID
npx supabase gen types typescript --linked > types/supabase.ts

Edit package.json:

{
  "scripts": {
    "gen-types": "supabase gen types --lang=typescript --linked > types/supabase.ts"
  }
}

Generating Types.

npm run gen-types

When creating a database type in supabase.com

• Api Docs > Introduction > Generating Types

Supabase Auth

Install Supabase packages.

npm install @supabase/supabase-js @supabase/ssr

Set environment variables. Edit .env.local:

NEXT_PUBLIC_SUPABASE_URL=<your_supabase_project_url>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<your_supabase_anon_key>

• Setting up Server-Side Auth for Next.js
• Auth rate limits

Tailwind CSS

Install Tailwind CSS.

npm install --save-dev tailwindcss postcss autoprefixer
npx tailwindcss init -p

Using 'clsx' or 'classnames' with 'tailwind-merge'.

npm install tailwindcss-animate class-variance-authority clsx tailwind-merge

lib/utils/cn.ts:

import clsx, { ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export const cn = (...classes: ClassValue[]) => twMerge(clsx(...classes));

Shadcn UI

Beautifully designed components that you can copy and paste into your apps. Accessible.

npx shadcn-ui@latest init

Adding dark mode.

npm install next-themes

Use the add command to add components and dependencies to your project.

npx shadcn-ui@latest add

Hides content from the screen in an accessible way.

npm install @radix-ui/react-visually-hidden

Add icon libraries.

npm install lucide-react @radix-ui/react-icons

(Optional) If you are loading the lucide icon component dynamically, edit next.config.js.

module.exports = {
  transpilePackages: ['lucide-react'],
}

Shadcn UI - Time Picker

A simple TimePicker for your Shadcn UI project.

• https://github.com/openstatusHQ/time-picker

Shadcn UI - Emblor

A fully-featured tag input component built with shadcn/ui.

npm install emblor

• https://github.com/JaleelB/emblor

Internationalization (i18n)

Internationalization for react done right. Using the i18next i18n ecosystem.

npm install react-i18next i18next i18next-http-backend

Custom trans component rendering for the client side.

import { useTrans } from '@/hooks/i18next'

const { trans } = useTrans()

export default function App() {
  return (
    <div>
    {trans('key', { 
      components: {
        i: <i />,
        link1: <Link href="#" />,
      },
      values: { what: 'world' }
    })}
    </div>
  )
}

// translation.json
// { "key": "hello <i>beautiful</i> <link1>{{what}}</link1>" }

The configuration for i18next is i18next.config.ts.

Schema Validation

Performant, flexible and extensible forms library for React Hooks.

npm install react-hook-form 

TypeScript-first schema validation with static type inference.

npm install zod @hookform/resolvers

Useful for translating zod error messages.

npm install zod-i18n-map

Redux Toolkit

The official, opinionated, batteries-included toolset for efficient Redux development.

npm install @reduxjs/toolkit react-redux

persist and rehydrate a redux store.

npm install redux-persist

SWR

React Hooks for Data Fetching.

npm install swr

PWA (Progressive Web Apps)

Zero config PWA plugin for Next.js, with workbox.

npm install next-pwa

• next-pwa

Nodemailer

Send e-mails with Node.JS.

npm install nodemailer
npm install --save-dev @types/nodemailer

Ckeditor 5

Install packages

npm install ckeditor5 @ckeditor/ckeditor5-react

Utilities

Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env.

npm install browserslist

A small, fast and rich-API browser/platform/engine detector for both browser and node.

npm install bowser

A collection of essential TypeScript types.

npm install type-fest

React hook library, ready to use, written in Typescript.

npm install usehooks-ts

A modern JavaScript utility library delivering modularity, performance, & extras.

npm install lodash @types/lodash

Day.js 2kB immutable date-time library alternative to Moment.js with the same modern API.

npm install dayjs

Flatten/unflatten nested Javascript objects.

npm install flat

JsonWebToken implementation for node.js.

npm install jsonwebtoken @types/jsonwebtoken

Slugifies a string

npm install slugify

Svg react icons of popular icon packs.

npm install react-icons

Vector (*.svg) country flag icons in 3:2 aspect ratio.

npm install country-flag-icons

Generate massive amounts of fake data in the browser and node.js.

npm install @faker-js/faker