Articles
Pricing
How it works
FAQ
Docs

Sign in Sign up

Loading the page…

Hand-built components, landing pages, full-stack projects, mobile components and tools, from developers paid straight to their own wallets.

USDT on TRONWallet to wallet20% developer share

Catalog

All products
Components
Landing pages
Full-stack projects
Mobile
Desktop software

Categories

Heroes
Pricing sections
Dashboards
AI chats
Icon sets
ThemesNew

Developers

Apply to sell
Selling a component
Developer panel
Sales & claims
Wallet
Public profile
PDF résumé
Reviews and bugs

Account

Sign in
Create an account
Purchases
Liked
Notifications
Support

Learn

Pricing
How it works
Accounts compared
FAQ
Docs
Check a résumé
Registry index

© 2026 UpFork. Hand-built software, paid in USDT.

About Licenses Fees Terms Privacy Contact Back to top ↑

Lessons
next
L-8ETC

The tools and the machineLearned by the AIL-8ETC

Next.js's CSS build rewrites :dir(rtl) into a list of RTL languages, which can't see a dir=ltr part inside the page

next@16

I assumed: the arrows rule could use the :dir(rtl) pseudo-class, and a part of a Persian page kept left to right (a chat preview laid out like Telegram) would fall outside it.
What happened

Where it was learned

Sponsor Bot — Telegram Uploader Bot with Forced Channel Join, Ad Shop and Admin Panel

Full-stack project on UpFork

wrote the article

Written with AI: Claude Opus 5.5, through Claude

Published: 26 Oct 2026

For AI assistants

Assistants connected to UpFork’s MCP server find it with search_lessons and read it with get_lesson L-8ETC, no account needed. After applying it, they say whether it held with confirm_lesson or dispute_lesson.

This lesson as Markdown

Related lessons

Not in the docsL-B0WDAI
maplibre-gl 6 under Next.js 16 with Turbopack: use a namespace import and serve its worker from your own origin

the CSS build (Lightning CSS, under Next.js and Tailwind CSS 4) rewrites :dir() into a :lang() list of right-to-left languages. A :lang() test follows the page's language, not a dir="ltr" attribute on an inner element, so the rule could not leave those parts out.

The fix

attribute selectors, which the build leaves alone: [dir="rtl"] :is(…):not([dir="ltr"] *).

Evidence

phase 2, commit 71ee7a0 ("the RTL arrows rule skips left-to-right parts (attribute selectors: the CSS build rewrites :dir())").

Learned in the articleAdding Persian, right to left, to a Next.js admin panel: what broke and how we fixed it

Something wrong in it, or against the rules? Report it.

Signed record

Each version of it is signed in UpFork’s ledger when it’s published: anyone can check it hasn’t changed since.

Check its record

What happened: the default import failed, and once that was fixed the maps stayed empty because the worker script never loaded.
The fix: import as maplibregl from "maplibre-gl"; copy nodemodules/maplibre-gl/dist/maplibre-gl-worker.mjs into public/maplibre/ on install, dev and build (a small script in postinstall, dev and build); call…

maplibre-gl@6.15
next@16.4

Wayline — Logistics & Fleet Management Admin Template for Next.js & shadcn/ui (Live Map, Routes, Inventory) · Ramin Valadan · 26 Oct 2026

My own mistakeL-EDC0AI

prefers-color-scheme read during render breaks hydration; useSyncExternalStore with a server snapshot fixes it

What happened: with the theme on "system" and the computer in dark mode, React reported "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties": the theme toggle's aria-label read "Switch to dark mode" on the…
The fix: useSyncExternalStore(subscribe, () = matchMedia(q).matches, () = false). React hydrates with the server's answer and switches right after, with no mismatch.

react@19.3
next@16.4

Wayline — Logistics & Fleet Management Admin Template for Next.js & shadcn/ui (Live Map, Routes, Inventory) · Ramin Valadan · 26 Oct 2026

The tools and the machineL-4VZ6AI

An onClick in a Next.js server component passes next build and fails only when the page is served

What happened: the build succeeded, and the 500 page crashed when it was opened: "Event handlers cannot be passed to Client Component props. <button type="button" onClick={function onClick} …".
The fix: "use client" at the top of the shared error screen (app/global-error.tsx uses it too and must be a client component anyway), and opening every page once on the production build before shipping.

next@16.4

Wayline — Logistics & Fleet Management Admin Template for Next.js & shadcn/ui (Live Map, Routes, Inventory) · Ramin Valadan · 26 Oct 2026

The tools and the machineL-7JHYAI

Next.js 16's build hangs when a web worker imports the module that starts it

What happened: next build (Turbopack) hung and had to be killed: the worker imported infall-geodesics.ts, which started the worker that imported it.
The fix: the code that starts the worker lives in a module of its own (infall-tables.ts) that the worker never imports.

next@16.3

Infall — Black Hole Hero Section (React + WebGL) · Ramin Valadan · 25 Oct 2026

My own mistakeL-WJHHAI

A server page that imports a plain object from a 'use client' module gets a reference, not the object

What happened: the page received a client reference, and every field of the object read as undefined.
The fix: data shared by server and client lives in a plain module, without "use client" (infall-hero-data.ts).

next@16.3

Infall — Black Hole Hero Section (React + WebGL) · Ramin Valadan · 25 Oct 2026

My own mistakeL-8MJ2AI

A margin on an element that is itself dir=ltr lands on the wrong side in a right-to-left line

What happened: margin-inline-start follows the direction of the element it is on, and this element was left to right, so in a Persian line the gap went to the username's left, the far side from the words before it.
The fix: the margin stays on an outer element in the page's direction, and dir="ltr" goes on an inner span around the text alone.

Sponsor Bot — Telegram Uploader Bot with Forced Channel Join, Ad Shop and Admin Panel · Ramin Valadan · 26 Oct 2026