Forem: Ayush

How To Set Up Next.js 15 For Production In 2025

Ayush — Sun, 26 Oct 2025 21:16:13 +0000

I've worked on Next.js applications that scaled to over 100k monthly active users and landing pages with millions of monthly visitors. In this article, I'll share all the lessons I've learned through countless iterations.

Whether you're part of a small team of one, two, or three developers, or you work on a massive Next.js project with multiple teams on the same codebase, it's critical to get the foundation of your app right from the start. Even if you're working on an existing project, you will discover some hard-earned insights that you can apply to your app today.

Let me take you by the hand and show you all the steps and packages that you want to set up and explain to you why they're useful, so your app scales smoothly.

Initialize Your Project

Begin by creating a new Next.js project.

npx create-next-app@latest

It may ask you if it can install the latest create-next-app version, just hit yes.

Need to install the following packages:
create-next-app@15.0.0
Ok to proceed? (y)

And then configure your project by hitting yes on everything (TypeScript, Tailwind, app router).

✔ What is your project named? … reactsquad-production
✔ Would you like to use TypeScript? … No / Yes
Yes
✔ Would you like to use ESLint? … No / Yes
Yes
✔ Would you like to use Tailwind CSS? … No / Yes
Yes
✔ Would you like to use `src/` directory? … No / Yes
Yes
✔ Would you like to use App Router? (recommended) … No / Yes
Yes
✔ Would you like to customize the default import alias (@/*)? … No / No

Then change into the directory of your project and open it in your favorite editor.

$ cd nextjs-for-production 
~/dev/nextjs-for-production (main) 🤯
$ cursor .

Run The Development Server

You want to verify that your setup worked.

Run npm run dev to start the development server.
Visit http://localhost:3000 to view your application.

Type Checks With TypeScript

Your project has TypeScript already configured, but you also want to add an explicit command to your package.json that checks all your files for type errors.

package.json

"type-check": "tsc -b"

You're going to use this command later together with other automated static analysis checks.

Code Formatting

When you collaborate with a large team on a project, it's important to unify the way that everyone writes code. Discuss choices like using semicolons, quote styles, and tabs versus spaces with your team.

Then use tools to enforce your style guide and format code automatically.

There are two tools for that: Prettier and ESLint.

Prettier

Prettier is an opinionated code formatter that eliminates style discussions during code reviews.

Install Prettier together with its Tailwind plugin.

npm install --save-dev prettier prettier-plugin-tailwindcss

Create a prettier.config.js file with your preferred rules.

prettier.config.js

module.exports = {
  arrowParens: 'avoid',
  bracketSameLine: false,
  bracketSpacing: true,
  htmlWhitespaceSensitivity: 'css',
  insertPragma: false,
  jsxSingleQuote: false,
  plugins: ['prettier-plugin-tailwindcss'],
  printWidth: 80,
  proseWrap: 'always',
  quoteProps: 'as-needed',
  requirePragma: false,
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'all',
  useTabs: false,
};

Add a formatting script to your package.json.

package.json

"format": "prettier --write .",

Run the formatter to apply your style.

$ npm run format

> nextjs-for-production@0.1.0 format
> prettier --write .

next.config.mjs 4ms (unchanged)
package-lock.json 54ms (unchanged)
package.json 1ms (unchanged)
postcss.config.mjs 2ms (unchanged)
README.md 20ms (unchanged)
src/app/globals.css 17ms (unchanged)
src/app/layout.tsx 30ms (unchanged)
src/app/page.tsx 11ms (unchanged)
tailwind.config.ts 2ms (unchanged)
tsconfig.json 2ms (unchanged)

Your files are now "prettier", but you also want to use ESLint.

ESLint

ESLint can scan your code for both stylistic and logical issues. Install ESLint and its plugins, like unicorn, playwright and import sort.

npm install --save-dev @typescript-eslint/parser eslint-plugin-unicorn eslint-plugin-import eslint-plugin-playwright eslint-config-prettier eslint-plugin-prettier eslint-plugin-simple-import-sort

Update your .eslintrc.json.

.eslintrc.json

{
  "extends": [
    "next/core-web-vitals",
    "plugin:unicorn/recommended",
    "plugin:import/recommended",
    "plugin:playwright/recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["simple-import-sort"],
  "rules": {
    "simple-import-sort/exports": "error",
    "simple-import-sort/imports": "error",
    "unicorn/no-array-callback-reference": "off",
    "unicorn/no-array-for-each": "off",
    "unicorn/no-array-reduce": "off",
    "unicorn/prevent-abbreviations": [
      "error",
      {
        "allowList": {
          "e2e": true
        },
        "replacements": {
          "props": false,
          "ref": false,
          "params": false
        }
      }
    ]
  },
  "overrides": [
    {
      "files": ["*.js"],
      "rules": {
        "unicorn/prefer-module": "off"
      }
    }
  ]
}

This tutorial's plugins offer different functions. For detailed descriptions, visit their respective GitHub pages.

But in short, they enforce coding standards, organize imports, and ensure correct use of modern JavaScript features. Since ESLint and Prettier can conflict, this setup makes them work together smoothly. The plugins also help prevent bugs and keep styles consistent, especially with tools like Vitest and Playwright.

Add a linting script to your package.json.

package.json

"lint:fix": "next lint --fix",

Run it to format all files according to your new rules.

$ npm run lint:fix

> nextjs-for-production@0.1.0 lint:fix
> next lint --fix

✔ No ESLint warnings or errors

If you get a TypeScript version warning, you can ignore that.

Note: As of this article's writing, ESLint 9 is available, but this tutorial uses ESLint 8 because many plugins do not yet support the latest version.

Commitlint

When collaborating with a large team, it's also helpful to enforce consistent commit messages to keep the project history clear. By choosing the right standards, you can automate changelog and release generation with correct semantic versioning.

Install Commitlint and its necessary configurations. This includes Husky, which helps manage Git hooks.

npm install --save-dev @commitlint/cli@latest @commitlint/config-conventional@latest husky@latest

Initialize Husky in your project to set up the basic configuration.

npx husky-init && npm install

Add hooks to automate linting and type checking before each commit, and customize your commit message workflow.

npx husky add .husky/pre-commit 'npm run lint && npm run type-check'
npx husky add .husky/prepare-commit-msg 'exec < /dev/tty && npx cz --hook || true'

The pre-commit hook runs after git commit, but before the commit message is finalized and runs linting and type-checking on your code.

The prepare-commit-msg hook runs after git commit is initiated but before the commit message editor opens. It runs commitizen CLI to let you craft conventional commit messages. You'll learn how to use this hook in a bit.

Remove the line that says npm test from .husky/_/pre-commit.

Make sure these scripts are executable.

chmod a+x .husky/pre-commit
chmod a+x .husky/prepare-commit-msg

Here, chmod stands for "change mode." This command allows you to change the access permissions or modes of a file or directory in Unix and Unix-like operating systems. The argument a+x adds execute permissions for all users.

Install Commitizen, which provides a CLI for crafting conventional commit messages.

npm install --save-dev commitizen cz-conventional-changelog

Configure Commitizen in your package.json to use the conventional changelog standard.

package.json

"config": {
  "commitizen": {
    "path": "cz-conventional-changelog"
  }
},

The conventional changelog standard is a specification for adding human and machine-readable meaning to commit messages. It is designed to automate the producing of changelogs and releases based on the Git history of your project.

A future article will explain this standard in detail. It's included in this tutorial because getting it right from the start is important. You can use it and benefit from it without needing an in-depth understanding.

Create your commitlint.config.cjs file with rules that suit your team's needs. This setup ensures your commit messages are consistent and relevant to the changes made.

commitlint.config.cjs

const config = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'references-empty': [1, 'never'],
    'footer-max-line-length': [0, 'always'],
    'body-max-line-length': [0, 'always'],
  },
};

module.exports = config;

Database With Prisma

For database management, use Prisma, which is an open-source ORM.

Install Prisma and initialize it.

npm install --save-dev prisma
npx prisma init

Define your schema in prisma/schema.prisma.

prisma/schema.prisma

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id    String @id @default(cuid())
  email String @unique
  name  String
}

Add the Prisma client and set up useful scripts for database management.

npm install @prisma/client

package.json

"prisma:push": "prisma db push",
"prisma:studio": "prisma studio",
"prisma:generate": "prisma generate",
"prisma:migrate": "prisma migrate dev",
"prisma:wipe": "prisma migrate reset --force --skip-seed && prisma migrate deploy && prisma db seed",

These scripts manage database schema migrations, data visualization through Prisma Studio, and database seeding.

Create a seed file to populate your database with initial data.

prisma/seed.ts

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

async function main() {
  await prisma.user.create({
    data: {
      email: 'jan@reactsquad.io',
      name: 'Jan Hesters',
    },
  });
}

main()
  .then(async () => {
    await prisma.$disconnect();
  })
  .catch(async (e) => {
    console.error(e);
    await prisma.$disconnect();
    process.exit(1);
  });

Update your package.json to point to the seed script.

package.json

"prisma": {
  "seed": "tsx prisma/seed.ts"
},

Install tsx for running TypeScript files.

npm install --save-dev tsx

Generate your Prisma client.

npx prisma generate

Create a singleton instance of Prisma client to avoid connection issues.

src/lib/db.server.ts

import { PrismaClient } from '@prisma/client';

const globalForPrisma = global as unknown as {
  prisma: PrismaClient | undefined;
};

export const db =
  globalForPrisma.prisma ??
  new PrismaClient({
    log: ['query'],
  });

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = db;

Authentication With Clerk

For authentication, use Clerk. Sign up at clerk.com and create a new application.

Install the Clerk SDK.

npm install @clerk/nextjs

Add your Clerk keys to .env.local.

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...

Wrap your app with ClerkProvider in your root layout.

src/app/layout.tsx

import { ClerkProvider } from '@clerk/nextjs';
import type { Metadata } from 'next';
import './globals.css';

export const metadata: Metadata = {
  title: 'Next.js for Production',
  description: 'Production-ready Next.js setup',
};

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

Create middleware to protect your routes.

src/middleware.ts

import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';

const isProtectedRoute = createRouteMatcher(['/dashboard(.*)']);

export default clerkMiddleware(async (auth, req) => {
  if (isProtectedRoute(req)) await auth.protect();
});

export const config = {
  matcher: [
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    '/(api|trpc)(.*)',
  ],
};

Create a dashboard page to test authentication.

src/app/dashboard/page.tsx

import { db } from '@/lib/db.server';

export default async function DashboardPage() {
  const user = await db.user.findFirst();

  return (
    <div>
      <h1>Dashboard</h1>
      <p>{user?.name}</p>
      <p>{user?.email}</p>
    </div>
  );
}

Testing With Vitest

Add Vitest for unit and integration testing.

Install Vitest and related dependencies.

npm install --save-dev vitest @vitejs/plugin-react vite-tsconfig-paths @vitest/coverage-v8

Create a Vitest configuration file.

vitest.config.ts

import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';
import { defineConfig } from 'vitest/config';

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  test: {
    environment: 'jsdom',
    coverage: {
      provider: 'v8',
    },
  },
});

Add test scripts to your package.json.

package.json

"test": "vitest",
"test:ui": "vitest --ui",

Create a sample test file.

src/lib/db.server.test.ts

import { db } from '@/lib/db.server';
import { expect, test } from 'vitest';

test('db is defined', () => {
  expect(db).toBeDefined();
});

Run your tests to verify the setup.

$ npm run test

> reactsquad-production@0.1.0 test
> vitest


 DEV  v2.1.8 /dev/reactsquad-production

 ✓ src/lib/db.server.test.ts (1)
   ✓ db is defined

 Test Files  1 passed (1)
      Tests  1 passed (1)

Deployment With Vercel

Deploy your application to Vercel.

Install the Vercel CLI.

npm install -g vercel

Link your project to Vercel.

vercel link

Create a production database on Vercel.

Go to your project on Vercel
Navigate to Storage tab
Click Create Database
Select Postgres
Choose a region (preferably close to your function region)
Click Create

Then add POSTGRES_URL_NON_POOLING to the datasource in your Prisma schema.

prisma/schema.prisma

datasource db {
  provider  = "postgresql"
  // Uses connection pooling
  url       = env("DATABASE_URL")
  // Uses direct connection
  directUrl = env("POSTGRES_URL_NON_POOLING")
}

Vercel uses connection poolers, which manage a pool of database connections that can be reused by different parts of an application. The directUrl property ensures operations requiring direct database access, such as migrations, can bypass the connection pooler for reliable execution.

You can get the environment variables for your Vercel database by pulling them from Vercel.

vercel env pull .env

Playwright

Use E2E tests with Playwright because they give you the most confidence that your app works as intended.

Initialize Playwright.

$ npm init playwright@latest
Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
✔ Where to put your end-to-end tests? · playwright
✔ Add a GitHub Actions workflow? (y/N) · false
✔ Install Playwright browsers? (Y/n) · true

Modify the webServer key in your playwright.config.ts file.

playwright.config.ts

webServer: {
  command: process.env.CI ? 'npm run build && npm run start' : 'npm run dev',
  port: 3000,
},

Add test scripts to your package.json.

package.json

"test:e2e": "npx playwright test",
"test:e2e:ui": "npx playwright test --ui",

The first one runs your Playwright test in headless mode, while the second one runs your test in UI mode with time travel debugging and watch mode.

Create a sample test.

playwright/example.spec.ts

import { expect, test } from '@playwright/test';

test.describe('dashboard page', () => {
  test('given any user: shows the test user', async ({ page }) => {
    await page.goto('/dashboard');

    await expect(page.getByText('Jan Hesters')).toBeVisible();
    await expect(page.getByText('jan@reactsquad.io')).toBeVisible();
  });
});

Run your tests to verify the setup.

$ npm run test:e2e

> reactsquad-production@0.1.0 test:e2e
> npx playwright test

Running 3 tests using 3 workers
  3 passed (3.9s)

GitHub Actions

Set up CI/CD with GitHub Actions.

Add a secret for your database URL to your repository's settings in GitHub.

DATABASE_URL="postgresql://postgres:postgres@localhost:5432/testdb"

Create your GitHub Actions workflow configuration.

.github/workflows/pull-request.yml

name: Pull Request

on: [pull_request]

jobs:
  lint:
    name: ⬣ ESLint
    runs-on: ubuntu-latest
    steps:
      - name: ⬇️ Checkout repo
        uses: actions/checkout@v3

      - name: ⎔ Setup node
        uses: actions/setup-node@v3
        with:
          node-version: 20

      - name: 📥 Download deps
        uses: bahmutov/npm-install@v1

      - name: 🔬 Lint
        run: npm run lint

  type-check:
    name: ʦ TypeScript
    runs-on: ubuntu-latest
    steps:
      - name: ⬇️ Checkout repo
        uses: actions/checkout@v3

      - name: ⎔ Setup node
        uses: actions/setup-node@v3
        with:
          node-version: 20

      - name: 📥 Download deps
        uses: bahmutov/npm-install@v1

      - name: 🔎 Type check
        run: npm run type-check --if-present

  commitlint:
    name: ⚙️ commitlint
    runs-on: ubuntu-latest
    if: github.actor != 'dependabot[bot]'
    env:
      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
    steps:
      - name: ⬇️ Checkout repo
        uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - name: ⚙️ commitlint
        uses: wagoid/commitlint-github-action@v4

  vitest:
    name: ⚡ Vitest
    runs-on: ubuntu-latest
    services:
      postgres:
        image: postgres:12
        env:
          POSTGRES_USER: postgres
          POSTGRES_PASSWORD: postgres
          POSTGRES_DB: testdb
        ports:
          - 5432:5432
    steps:
      - name: ⬇️ Checkout repo
        uses: actions/checkout@v3

      - name: ⎔ Setup node
        uses: actions/setup-node@v3
        with:
          node-version: 20

      - name: 📥 Download deps
        uses: bahmutov/npm-install@v1

      - name: 🛠 Setup Database
        run: npm run prisma:wipe
        env:
          DATABASE_URL: postgresql://postgres:postgres@localhost:5432/testdb

      - name: ⚡ Run vitest
        run: npm run test -- --coverage
        env:
          DATABASE_URL: postgresql://postgres:postgres@localhost:5432/testdb

  playwright:
    name: 🎭 Playwright
    runs-on: ubuntu-latest
    services:
      postgres:
        image: postgres:12
        env:
          POSTGRES_USER: postgres
          POSTGRES_PASSWORD: postgres
          POSTGRES_DB: testdb
        ports:
          - 5432:5432
    steps:
      - name: ⬇️ Checkout repo
        uses: actions/checkout@v3

      - name: ⎔ Setup node
        uses: actions/setup-node@v3
        with:
          node-version: 20

      - name: 📥 Download deps
        uses: bahmutov/npm-install@v1

      - name: 🌐 Install Playwright Browsers
        run: npx playwright install --with-deps

      - name: 🛠 Setup Database
        run: npm run prisma:wipe
        env:
          DATABASE_URL: postgresql://postgres:postgres@localhost:5432/testdb

      - name: 🎭 Playwright Run
        run: npx playwright test
        env:
          DATABASE_URL: postgresql://postgres:postgres@localhost:5432/testdb

      - name: 📸 Playwright Screenshots
        uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

Now every time you make a pull request to your app, it automatically runs your tests, type checks, and linting to ensure everyone contributes code with the same formatting and quality standards.

Conclusion

You now have a production-ready Next.js 15 setup with:

TypeScript for type safety
Prettier and ESLint for code quality
Commitlint and Husky for consistent Git workflow
Prisma for database management
Clerk for authentication
Vitest for unit testing
Playwright for E2E testing
GitHub Actions for CI/CD
Vercel for deployment

This foundation will help your application scale smoothly as your team and user base grow.

Want to learn more senior fullstack secrets? Subscribe to my newsletter for weekly updates on new videos, articles, and courses with exclusive bonus content and discounts.

Building Smarter Tree UIs: A Deep Dive into Legoblock's Headless Renderer

Ayush — Sun, 26 Oct 2025 21:03:01 +0000

View on Legoblock npm package

In the world of modern web applications, hierarchical data is everywhere. File systems, organizational charts, navigation menus, comment threads, and nested filters all share a common challenge: rendering tree structures efficiently while maintaining clean, maintainable code. Enter Legoblock, a headless recursive renderer that elegantly solves this problem with a fresh approach to nested data visualization.

What is Legoblock?

Legoblock (@legoblock/ui) is a lightweight React library that handles the complex parts of tree rendering—recursion and immutable state updates—while giving you complete control over the visual presentation. Unlike monolithic component libraries that lock you into specific designs, Legoblock embraces the "headless UI" philosophy: it manages the logic, you control the markup.

At its core, Legoblock takes your tree data and a "recurring node" component, then recursively clones that component for each node in your tree. Along the way, it injects powerful helpers like addNode, deleteNode, updateNode, and updateAllChildrenNode, turning what could be dozens of lines of boilerplate into a single elegant declaration.

Why Choose a Headless Approach?

Traditional tree component libraries often come with built-in styling, icons, and interaction patterns. While convenient for prototyping, they become constraints when your design requirements diverge from the library's opinions. You end up fighting against the library's CSS, working around its component structure, or worse—ejecting entirely and losing all the benefits.

Legoblock solves this by being radically unopinionated about presentation. It doesn't render a single <div> or apply a single CSS class without your explicit instruction. Your recurring node component is just a regular React component—you can use Tailwind, CSS modules, styled-components, or inline styles. You control the DOM structure completely.

This separation of concerns means you get the best of both worlds: robust tree logic handled by the library, and complete creative freedom for your UI.

Core Concepts Explained

The Recurring Node Pattern

The heart of Legoblock is the "recurring node" concept. You create a single component that represents one node in your tree, and Legoblock handles the recursion:

function TreeNode({ node, children, deleteNode, addNode }) {
  return (
    <div className="node">
      <div className="node-content">
        <span>{node.name}</span>
        <button onClick={deleteNode}>Delete</button>
        <button onClick={() => addNode({ name: 'New Item', type: 'file' })}>
          Add Child
        </button>
      </div>
      {children}
    </div>
  );
}

Notice the {children} prop? That's where the rendered subtree appears. Legoblock recursively processes your tree data, cloning your component at each level and passing in the appropriate node data and the rendered children for that node.

Path-Based Updates

One of Legoblock's clever design choices is its use of "access paths." Each node knows its position in the tree as an array of indices like [0, 2, 1], meaning "first child, third grandchild, second great-grandchild." When you call deleteNode() or updateNode(), Legoblock uses this path to navigate directly to the target location in O(depth) time, rather than searching the entire tree.

This approach combines the simplicity of recursive rendering with the performance of direct addressing.

Immutable Updates Made Easy

React developers know the importance of immutable state updates, especially with nested data. Manually cloning deep tree structures while updating specific nodes is tedious and error-prone. Legoblock handles this complexity for you.

When any modification occurs, Legoblock:

Creates a single structuredClone of your tree
Applies the change to the cloned structure
Calls your updatedRecurringData callback once with the new tree

This ensures React's reconciliation works correctly while keeping your update logic simple.

Real-World Use Cases

File System Explorer

Building a file browser? Legoblock makes it straightforward:

type FileNode = {
  name: string;
  type: 'file' | 'folder';
  size?: number;
  children?: FileNode[];
};

function FileItem({ node, children, addNode, deleteNode }) {
  const isFolder = node?.type === 'folder';

  return (
    <div style={{ paddingLeft: 16 }}>
      <div className="file-row">
        <span className="icon">{isFolder ? '📁' : '📄'}</span>
        <span className="name">{node?.name}</span>
        {isFolder && (
          <>
            <button onClick={() => addNode({ name: 'new-file.txt', type: 'file' })}>
              New File
            </button>
            <button onClick={() => addNode({ name: 'new-folder', type: 'folder', children: [] })}>
              New Folder
            </button>
          </>
        )}
        <button onClick={deleteNode}>Delete</button>
      </div>
      {children}
    </div>
  );
}

Cascading Filters

Need hierarchical filters where selecting a parent selects all children? The updateAllChildrenNode helper makes this trivial:

function FilterNode({ node, children, updateAllChildrenNode }) {
  const handleToggle = (checked) => {
    updateAllChildrenNode(
      { selected: checked },
      { includeSelf: true }
    );
  };

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={!!node?.selected}
          onChange={(e) => handleToggle(e.target.checked)}
        />
        {node?.label}
      </label>
      <div className="children">{children}</div>
    </div>
  );
}

The updateAllChildrenNode function traverses the entire subtree starting from the current node and applies your update to every descendant. You can even provide predicate functions to filter which nodes get updated, or limit the depth of recursion.

Organization Chart

Render an interactive org chart with expand/collapse functionality:

type Employee = {
  name: string;
  role: string;
  expanded: boolean;
  children?: Employee[];
};

function EmployeeNode({ node, children, updateNode }) {
  const toggleExpanded = () => {
    updateNode({ ...node, expanded: !node?.expanded });
  };

  return (
    <div className="employee-card">
      <h3>{node?.name}</h3>
      <p>{node?.role}</p>
      {node?.children?.length > 0 && (
        <button onClick={toggleExpanded}>
          {node?.expanded ? 'Collapse' : 'Expand'}
        </button>
      )}
      {node?.expanded && children}
    </div>
  );
}

Advanced Features

Flexible Insertion Points

The addNode helper supports three insertion strategies:

'child' (default): Add as a child of the current node
'before': Insert as a sibling before the current node
'after': Insert as a sibling after the current node

<button onClick={() => addNode(newItem, 'after')}>
  Add Sibling Below
</button>

This flexibility is crucial for building intuitive tree editors where users need fine-grained control over item placement.

Bulk Updates with Predicates

The updateAllChildrenNode function is remarkably powerful. Beyond simple cascading updates, you can:

Update only nodes matching a condition:

updateAllChildrenNode(
  { priority: 'high' },
  { 
    predicate: (node) => node.type === 'task' && !node.completed 
  }
);

Limit update depth:

updateAllChildrenNode(
  { visible: false },
  { depth: 2 } // Only update current node and two levels down
);

Transform with a function:

updateAllChildrenNode(
  (node) => ({ 
    ...node, 
    timestamp: Date.now() 
  })
);

Custom Children Field

Not all tree structures use children as the property name. Legoblock supports customization:

type MenuItem = {
  label: string;
  items?: MenuItem[]; // Using 'items' instead of 'children'
};

updateAllChildrenNode(
  { expanded: true },
  { childrenField: 'items' }
);

Performance Characteristics

Legoblock's design prioritizes both developer experience and runtime performance:

Targeted Updates: Using access paths, updates target specific nodes in O(depth) time rather than searching the entire tree.

Single Clone: Each operation performs exactly one structuredClone, avoiding unnecessary copies and maintaining predictable performance.

Localized Work: Operations like delete and add only modify the relevant portion of the tree—a parent's children array, not the entire structure.

Subtree Operations: When updating multiple nodes (like cascading selection), the algorithm only traverses the affected subtree, not the whole tree.

React-Friendly: By maintaining immutability and emitting updates once per operation, Legoblock enables efficient React reconciliation.

For a tree with 1,000 nodes at depth 5, updating a single node is roughly O(5) + O(siblings) rather than O(1000). This difference becomes dramatic as trees grow larger.

Getting Started

Installation is straightforward via npm or yarn:

npm install @legoblock/ui
# or
yarn add @legoblock/ui

A minimal example looks like this:

import { NestedStructure } from '@legoblock/ui';
import { useState } from 'react';

function App() {
  const [tree, setTree] = useState([
    {
      name: 'Root',
      children: [
        { name: 'Child 1' },
        { name: 'Child 2' }
      ]
    }
  ]);

  return (
    <NestedStructure
      recurringNode={<TreeNode />}
      recurringData={tree}
      updatedRecurringData={setTree}
    />
  );
}

That's it. Three props, and you have a fully functional recursive tree renderer.

When to Use Legoblock

Legoblock shines when you need:

Full visual control: Your design system is unique, and off-the-shelf components won't cut it
Complex tree interactions: Beyond simple rendering—you need adding, deleting, moving, and bulk updates
Type safety: TypeScript support is first-class, with proper generics for your node types
Performance at scale: Trees with hundreds or thousands of nodes that need efficient updates
Minimal bundle size: No CSS, no icons, no unnecessary dependencies

Conversely, if you need a quick prototype and a default tree UI is fine, a heavier component library might be faster to set up initially.

Comparison with Alternatives

Traditional tree libraries like react-treeview or rc-tree provide complete components with styling and interactions included. They're great for rapid prototyping but limit customization.

Lower-level solutions require you to hand-code recursion and immutable updates yourself—full control but significant boilerplate.

Legoblock occupies the sweet spot: it handles the complex algorithmic work while leaving presentation entirely to you. You get the power of a custom solution with the convenience of a library.

Best Practices

Keep Node Components Pure: Your recurring node should be a simple presentational component. Keep business logic in parent components or custom hooks.

Leverage Access Paths: For advanced features like drag-and-drop, the accessPath prop gives you the exact location of each node.

Use TypeScript: Define your node type and pass it to RecurringNodeProps<YourNodeType> for full type safety.

Optimize Rendering: If your tree is very large, consider memoizing your recurring node component with React.memo().

Controlled State: Always maintain your tree as React state. Legoblock is fully controlled—it never maintains internal state.

Conclusion

Legoblock represents a thoughtful approach to a common problem in web development. By embracing headless architecture, it provides powerful tree manipulation capabilities without imposing design constraints. Whether you're building a file manager, a comment system, a menu builder, or any other hierarchical interface, Legoblock handles the hard parts so you can focus on creating great user experiences.

The library's emphasis on immutability, performance, and developer ergonomics makes it a solid choice for projects where tree structures are central to the user interface. With its minimal API surface and maximum flexibility, Legoblock proves that sometimes the best libraries are the ones that do less—but do it exceptionally well.

Ready to try it out? Check out the live playground on CodeSandbox or install it in your project today. Your next tree UI just got a lot simpler to build.

Effortlessly Setting up Your React Project with Vite, Husky, TypeScript, and ESLint: A Comprehensive Guide

Ayush — Mon, 03 Apr 2023 19:05:26 +0000

**Just a small request, I have a npm package

wiz-ui - npm

Welcome to the React Easy Packager Component Library! This library provides a collection of reusable and customizable React components to help you build beautiful and efficient user interfaces for your web applications.. Latest version: 0.0.16, last published: 5 months ago. Start using wiz-ui in your project by running `npm i wiz-ui`. There are no other projects in the npm registry using wiz-ui.

npmjs.com

you guys can try it, it will help create awesome recursive components.

Thank you**

What we will learn

This blog post provides a step-by-step guide to set up a React project using Vite, Husky, TypeScript, and ESLint.

It explains the benefits of each tool and their role in ensuring a smooth and efficient development process.

The post includes code snippets and screenshots to illustrate each step of the setup process, making it easy for readers to follow along.

To get The full code go to https://github.com/pappijx/Vite-react-eslint-prettier-husky-setup

Prerequisites

Make sure you have Node.js installed on your machine. You can download it from the official website (https://nodejs.org/).

Setup Guide

1. Generate Vite + Typescript App

-> After this you will be asked to enter your project name

terminal> npm create vite@latest
? Project name: » test-project

-> Next you need to select the framework of your choice
-> Select react here

? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
    Vue
>   React
    Preact
    Lit
    Svelte
    Others

-> Next you need to add typescript to you project

? Select a variant: » - Use arrow-keys. Return to submit.
    JavaScript
>   TypeScript
    JavaScript + SWC
    TypeScript + SWC

-> After this you will see the final config as

terminal> npm create vite@latest
√ Project name: ... test-project
√ Select a framework: » React
√ Select a variant: » TypeScript

Scaffolding project in D:\Work\Blogs\test-project...

Done. Now run:

  cd test-project
  npm install
  npm run dev

-> To run the app we need to install dependencies, so just do

terminal> npm i

-> After this you project directory and package.json looks like this

2. Setup eslint (with new vite you dont need this just setup your tsconfig right)

-> First we need to install eslint as dev dependency

terminal> npm i -D eslint

-> Now we need to add a basic config file for eslint, for that

terminal> npx eslint --init

// this generates 

You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
  @eslint/create-config
Ok to proceed? (y)

-> Just say y (yes) here and proceed. After this we need to select the way we want to use eslint

? How would you like to use ESLint? ... 
  To check syntax only
> To check syntax and find problems
  To check syntax, find problems, and enforce code style

-> I will select the second option for now, and we will use airbnb style guide for eslint afterwards.

-> After this choose module type for your project, I will choose Javascript modules

? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

-> Next choose framework as react

? Which framework does your project use? ...
> React
  Vue.js
  None of these

-> Next let the wizard know that we are using typescript

? Does your project use TypeScript? » No / Yes
// select yes and hit enter

-> Next select the platform where the will run, select browser and hit enter

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
> Browser
  Node

-> Now select the .eslintrc file extension, I will go with javascript format.

? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON

-> Now the wizard will ask you for permission to install some dependencies, hit enter and proceed

The config that you've selected requires the following dependencies:

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
? Would you like to install them now? » No / Yes

-> And last question is, which package manager are you using? I am using npm, you can choose your package manager.

? Which package manager do you want to use? ... 
> npm
  yarn
  pnpm

-> Hitting enter initiates deps installation. And your root directory will have .eslintrc.cjs file with some basic settings.

-> Now your package.json and .eslintrc files will look something like below

*There is an error in the *

-> Now we need to setup a eslint style guide in our project, I am using airbnb() as the base style.
This helps a developer to write proper and clean code.

So we run below command to get all the dependencies required by eslint airbnb style guide.

terminal> npx install-peerdeps --dev eslint-config-airbnb
Need to install the following packages:
  install-peerdeps
Ok to proceed? (y) y

-> Insert y and hit enter. Now your devDependencies looks like below.

"devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.57.0",
    "@typescript-eslint/parser": "^5.57.0",
    "@vitejs/plugin-react": "^3.1.0",
    "eslint": "^8.2.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "typescript": "^4.9.3",
    "vite": "^4.2.0"
  }

-> Just add "airbnb", "airbnb/hooks" in your .eslintrc files extends key. Now your .eslintrc files looks like below

-> we need to add typescript support for eslint-airbnb

terminal> npm install eslint-config-airbnb-typescript

-> After this add 'airbnb-typescript' to your .eslintrc extends array.

-> After this we need to add project: './tsconfig.json' to out .eslintrc parserOptions.

-> You have a different error at top line in .eslintrc file as shown below.

-> This is because our .eslintrc file is not looked up by tsconfig file. So we need to add this in tsconfig.json, like below

-> After this open any tsx file, you will see blood all over the screen. This is because we are following airbnb guide for javascript.

Let open app.tsx file and remove all not so important code. So now the file looks like below with an error.

The error says

'React' must be in scope when using JSXeslint

This error occurs because airbnb style guide forces us to import React from 'react' as in old react this was a requirement, but in new versions of react we don't need this.

To escape this rule we will add exception in .eslintrc file in rules array.

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'airbnb',
    'airbnb-typescript',
    'airbnb/hooks',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  overrides: [],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: './tsconfig.json',
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    'react/react-in-jsx-scope': 0,
  },
};

Thats it for eslintrc file.

3. Add Prettier

-> We need prettier to format our code properly so that it it more readable and so everyone use similar code formatting

-> So now just install all prettier dependencies

terminal> npm i -D prettier eslint-config-prettier eslint-plugin-prettier

-> Now create .prettierrc.cjs file in root directory

module.exports = {
  trailingComma: "es5",
  tabWidth: 2,
  semi: true,
  singleQuote: true,
};

Thats all for prettier!!!

4. Add husky to project
-> Now, this is the easiest thing to do but the most important. Using husky you make your team follow the guidelines specified by you and that makes code cleaner and helps make good coding implementations.

a. Install Husky
Run the following command to install Husky as a development dependency:

npm install husky --save-dev

b. Enable Git Hooks
After installing Husky, enable Git hooks for your project:

This will create a .husky directory in your project root to store your hooks.

c. Add Husky to package.json
If you want Husky to automatically set up hooks after npm install, add this script to your package.json:

{
  "scripts": {
    "prepare": "husky install"
  }
}

d. Create a Hook
You can create a hook using the following command. For example, to set up a pre-commit hook:

npx husky add .husky/pre-commit "npm test"

Keep in mind to add eslint after prettier else it both will conflict and husky generates error

Thats it, You now have a well structured project with prettier, eslint, husky and vite.

Hoisting in javascript

Ayush — Wed, 26 Oct 2022 18:55:18 +0000

JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code.

Hoisting allows functions to be safely used in code before they are declared.

Variable and class declarations are also hoisted, so they too can be referenced before they are declared. Note that doing so can lead to unexpected errors, and is not generally recommended.

Function hoisting

One of the advantages of hoisting is that it lets you use a function before you declare it in your code.

catName("Tiger"); 
function catName(name) { 
  console.log(`My cat's name is ${name}`); 
} /* The result of the code above is: "My cat's name is Tiger" */

Without hoisting you would have to write the same code like this:

function catName(name) { 
  console.log(`My cat's name is ${name}`); 
} catName("Tiger"); /* The result of the code above is the same: "My cat's name is Tiger" *

Variable hoisting

Hoisting works with variables too, so you can use a variable in code before it is declared and/or initialized.

However, JavaScript only hoists declarations, not initializations! This means that initialization doesn't happen until the associated line of code is executed, even if the variable was originally initialized then declared, or declared and initialized in the same line.

Until that point in the execution is reached the variable has its default initialization (undefined for a variable declared using var, otherwise uninitialized).