Automatic Installation
$ npx create-next-app@14.2.20 .
✔ 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 > .nvmrcRun the init command to create a new Next.js project or to setup an existing one:
npx shadcn@latest init -dUse the add command to add components and dependencies to your project.
npx shadcn@latest add -aThis will add/install all shadcn components (overwrite if present).
npx shadcn@latest add -a -y -oAdd tanstack/react-table dependency:
npm install @tanstack/react-tableAdd 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 Tailwind CSS
npm install -D tailwindcss@3 postcss autoprefixerAdd Tailwind to your PostCSS configuration. postcss.config.js:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}Installing Auth.js
npm install next-auth@betaSetup Environment
npx auth secretInstalling Prisma Adapter
npm install @prisma/client @auth/prisma-adapter
npm install prisma --save-dev
npm install tsx --save-devIf you're not using a Prisma Postgres database, you won't need the @prisma/extension-accelerate package.
npm install @prisma/extension-accelerateApply schema to database.
npx prisma migrate dev --name initThe easiest way to explore and manipulate your data in all of your Prisma projects.
npx prisma studioBear necessities for state management in React
npm install zustandPowerful 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-querySend e-mails with Node.JS.
npm install nodemailer
npm install --save-dev @types/nodemailerShare target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env.
npm install browserslistEdit package.json:
{
"browserslist": [
"defaults and fully supports es6-module",
"maintained node versions"
],
}Optimized bcrypt in plain JavaScript with zero dependencies.
npm install bcryptjs @types/bcryptjsJWA, JWS, JWE, JWT, JWK, JWKS for Node.js, Browser, Cloudflare Workers, Deno, Bun, and other Web-interoperable runtimes.
npm install joseDay.js 2kB immutable date-time library alternative to Moment.js with the same modern API.
npm install dayjsA querystring parser with nesting support
npm install qs @types/qsGetting, setting and removing cookies on both client and server with next.js
npm install cookies-next@4svg react icons of popular icon packs
npm install react-iconsESLint 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-nextFind and fix problems in your JavaScript code.
npx eslint ./app
npx eslint --fix ./{app,components,config,context,hooks,lib,queries,store,types}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-prismaTo format a file in-place.
npx prettier --check "./app/**/*.{ts,tsx}"
npx prettier --write "./{app,components,config,context,hooks,lib,queries,store,types}/**/*.{ts,tsx}"