Skip to content

Latest commit

 

History

History
298 lines (210 loc) · 5.98 KB

DEPENDENCIES.md

File metadata and controls

298 lines (210 loc) · 5.98 KB

DEPENDENCIES

Table of Contents

Next.js

Automatic Installation

$ npx create-next-app@14.2.24 .

✔ 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

$ node -v > .nvmrc

How to set up a new Next.js project

shadcn

Run the init command to create a new Next.js project or to setup an existing one:

npx shadcn@latest init -d

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

npx shadcn@latest add -a

This will add/install all shadcn components (overwrite if present).

npx shadcn@latest add -a -y -o

Add tanstack/react-table dependency:

npm install @tanstack/react-table

Add the Toaster component. Edit app/layout.tsx:

import { Toaster } from '@/components/ui/sonner'

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster richColors closeButton />
      </body>
    </html>
  );
}

Install and configure Next.js

Tailwindcss

Install Tailwind CSS

npm install -D tailwindcss@3 postcss autoprefixer

Add Tailwind to your PostCSS configuration. postcss.config.js:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Get started with Tailwind CSS

Supabase

Install Supabase Auth & CLI

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

Initialize configurations for Supabase local development.

npx supabase init

Connect the Supabase CLI to your Supabase account by logging in with your personal access token.

npx supabase login

Link your local development project to a hosted Supabase project.

npx supabase link --project-ref <project-id>

Supabase CLI

prisma

Install Prisma ORM

npm install prisma --save-dev
npm install tsx --save-dev
# If you're not using a Prisma Postgres database, you won't need the @prisma/extension-accelerate package.
npm install @prisma/extension-accelerate

Then, run prisma init to initialize Prisma ORM in your project.

npx prisma init
npx prisma migrate dev --name init

Seed your database

npx prisma db seed

Set up Prisma Client

npm install @prisma/client

ORM Quickstarts Prisma

Zustand

Bear necessities for state management in React

npm install zustand

React Query

Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.

npm install @tanstack/react-query

Nodemailer

Send e-mails with Node.JS.

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

Browserslist

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

npm install browserslist

Edit package.json:

{
  "browserslist": [
    "defaults and fully supports es6-module",
    "maintained node versions"
  ],
}

Jose (JsonWebToken)

JWA, JWS, JWE, JWT, JWK, JWKS for Node.js, Browser, Cloudflare Workers, Deno, Bun, and other Web-interoperable runtimes.

npm install jose

Day.js

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

npm install dayjs

qs

A querystring parser with nesting support

npm install qs @types/qs

cookies-next

Getting, setting and removing cookies on both client and server with next.js

npm i cookies-next@4

ESLint

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.

npm install --save-dev eslint eslint-plugin-react eslint-plugin-react-hooks
npm install --save-dev eslint-plugin-import eslint-import-resolver-typescript
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin
npm install --save-dev @next/eslint-plugin-next

Find and fix problems in your JavaScript code.

npx eslint ./app
npx eslint --fix ./{app,components,config,context,hooks,lib,schemas,store,types,utils}

Prettier

Prettier is an opinionated code formatter.

npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier
npm install --save-dev eslint-plugin-tailwindcss prettier-plugin-tailwindcss
npm install --save-dev prettier-plugin-prisma

To format a file in-place.

npx prettier --check "./app/**/*.{ts,tsx}"
npx prettier --write "./{app,components,config,context,hooks,lib,schemas,store,types,utils}/**/*.{ts,tsx}"

Troubleshooting

ESLint: Plugin "react-hooks" was conflicted between ".eslintrc.js" and ".eslintrc.js » eslint-config-next » plugin:react-hooks/recommended".

npm --save-dev install eslint-plugin-react-hooks@4

[DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead.

nvm use v20.18.3
node -v > .nvmrc