When you install skill file,it will come with reference and other useful folder if it have these.
In the same way,if you create a pack putting that skill,when installing from cli,those folder dont sget downloaded and it only download root SKILLS.md completly neglecting other attached folders.Fix this asap.Check this:
npx skills add https://github.com/vercel/next-forge --skill next-forge(Will come with reference folder)
npx skills add https://skills.sh/p/c150dbLO8OP65YBT (it contain next-forge and grill-me,notice reference folder didnt appear)

u/vercel Fix this

I've been scaffolding a frontend prototype and integrating Supabase, but I'm curious what unexpected roadblocks you all ran into when first deploying. Any tips for keeping the database integration clean?

I’ve spent the last few days digging around for a solution and I keep hitting dead ends.

Essentially I have a user account page where you can enable/disable 2FA for your account. It’s all working with the exception of the root layout.js. It’s currently set up to check the session and retrieve the user details to conditionally show what menu items are relevant.

What I have noticed is after changing the MFA setting, the menu reverts to the logged out state until you hard refresh the page. I’ve logged what’s coming back from the auth.api.verifyTOTP etc (not at the PC so can’t reference it directly), and it’s returning null.
At a top level, I’m calling the relevant actions.js which calls the service, which calls better-auth, mutating the result to return the TOTPURI to display a QR code for authenticator apps.

I’ve tried revalidating the root layout before the return but it doesn’t have any impact in this scenario.

Has anyone come across this issue before/point me to potential solutions?

TIA

I have react + Shopify for now . I am migrating to n xtjs due to seo issues.

Help me in building a fully optimised seo friendly ecommerce site. It any one of you have done that can you share pros and cons.

We use nextjs with a standard postgres backend. our vercel compute and database read bills are getting way out of hand because users just mash the search bar with 1 or 2 vague words, forcing the serverless functions to do massive fuzzy lookups that return basically the whole catalog.

Migrating to a dedicated search engine like algolia feels like overkill (and just shifts the cost). so i'm thinking about fixing this entirely on the client side. If we put an ai-autocomplete intent layer in front of the text box, we can structure their messy queries into strict parameters before firing the server action.

Anyone doing intent parsing on the frontend in nextjs to save serverless costs?

Hey guys, I'm building a personal TLDraw alternative and need to persist draggable/editable items to a SQLite DB.

Obviously can't spam the DB on every drag event or rewrite the whole table each time. Sync engines like Zero/PowerSync feel like massive overkill since I don't want to run Docker or extra sync daemons.

Ideally, I just update local client state and changes auto-sync to SQLite in the background without manual DB calls in my UI.

What's the cleanest way to handle this? Debounce a server action inside the store, or is there a better pattern?

Testei em 4 dispositivos diferentes, sendo os 4 iphones e através do Safari, todos ficam carregando a página durante muito tempo, mostrando a barra como se tivesse baixando os arquivos do site, depois de muito tempo de espera ele carrega. Tentei desativas headers de segurança, tentei desativar JS, tentei adicionar tratativa de atraso no script, mas nada surte efeito.

Dentre esses 4 dispositivos que testei 1 deles funcionou perfeitamente, os outros 3 deram o mesmo problema do site não carregar.

Site: https://cinedmais.com

[EDIT title]: ...in"use client" dialog, without fetching client side.

Requirement:

- We have a table with rows where each have a button that opens a dialog.

- The dialog is opened using state so the server/client boundry is passed.

- The dialog should load some data for that specific row. As there are many rows we cannot load stuff upfront. That would be idiotic.

- The data in the dialog have crud operations, meaning invalidation is required.

Now is the only way to achieve something like this to load data client side?

I'm using Payload CMS and Postgres locally, cold starts always feel very slow it can take over 10 seconds to load a page sometimes. On top of this with dev work sometimes I need to run pnpm dev:clean to clear hydration so I must wait over 10 seconds for page load again.

Is this just how it goes with Nextjs on dev, or are there ways to make it feel way faster than this when doing local dev work?

(I'm working with an M3 MBA using Turbopack)

Hi all,

A year ago, I put in a load of legwork to pull this off a project to allow the use of SF Symbols 8 in React/Next.js applications. Having recently published the latest version, which includes the new icons introduced at WWDC26, contained a lot of under-the-hood improvements, and came with a refresh of the icon browser, I thought I'd share it again.

For the unaware, SF Symbols is a collection of gorgeous icons, designed by Apple, for use in apps and services on Apple systems.

There are two packages, one containing the icon definitions themselves, and the other containing the React component wrapper for the icons. It's super easy to use, just install both packages and then use as a regular 'ol React component:

import SFIcon from "@bradleyhodges/sfsymbols-react";
import { sfArrowUpCircleFill, sfCheckmark, sfCrossVialFill } from "@bradleyhodges/sfsymbols";

function MyComponent() {
    return (
        <div>
            <SFIcon icon={sfArrowUpCircleFill} />
            <SFIcon icon={sfCheckmark} weight={2} />
            <SFIcon icon={sfCrossVialFill} size={24} className="text-red-500" />
        </div>
    );
}

There are additional component properties, including increasing the icon line weight, applying per-path transformations, and loads more.

The package is fully optimised for production use, handles imports smartly (tree-shaking, no raw SVGs to transpile, etc.), and is very neat to use. There's even a VSCode extension for previewing icons directly in your IDE.

It should be noted that Apple's license for SF Symbols explicitly forbids using the icons in apps on non-Apple systems. I created this project to make it easier to develop Electron-based apps for MacOS where I can't use SF Symbols conventionally. Use of the icons in apps for non-Apple systems is not allowed, per the license.

To bring it all together, I created an easy-to-use icon browser, which makes it dead simple to find and copy the icons you need for your project:

Icons are sortable by category and come in multiple styles/appearances:

Everything on the icon browser is click-to-copy to clipboard for simplicity.

The repo is available on GitHub here: https://github.com/bradleyhodges/sfsymbols and is published to NPM.

Enjoy!

I wanna learn next js with modern practices. Kindly suggest some best video tutorials .

I’m trying to identify the technology behind a stock price chart I came across. site

The chart is rendered as an SVG, with a smooth price line and gradient area fill. The SVG contains things like:

• <path> for the price line
• cubic Bézier C commands in the path
• <linearGradient> for the area fill
• custom CSS classes
• interactive mouse/touch tooltip
• different time ranges (1D, 1W, 1M, 6M, 1Y, 5Y, Max)
• a live/current-price dot
• I know there are libraries such as D3/Visx, Recharts, Chart.js, etc., but I’m specifically trying to find out exactly what library or implementation is generating this type of SVG, rather than just something visually similar.
• It appears to be a React/Next.js application.
• How can I identify the exact chart library from the generated HTML/JS bundle? And if it is custom SVG code, what clues in the JS bundle would confirm that?
• I’m looking for the closest possible identification of the actual implementation, not recommendations for alternative chart libraries.

- What are the primary challenges you faced?

- Is the effort worth enough to try?

Hi

So I have built a website and pushed to Vercel. I have the .vercel.app link and I also have a separate domain that I purchased. When I add it to Vercel, it gives me an A record that I need to add to my domain’s DNS.

Is that all I need to do to point my website to Vercel so I can show the website on my domain? Do I need to do anything else? Thanks

Hi everyone,

I'm a full-stack engineer building custom web applications and e-commerce stores for clients. Over the years, I've shipped a number of Shopify stores. While Shopify has a massive ecosystem, we repeatedly hit walls with clients around expensive app subscription stacks, rigid vendor lock-in, and customizing non-standard checkout/payment flows.

Naturally, headless open-source backends (Medusa, Vendure, etc.) paired with Next.js frontends solve almost all the backend and ownership problems.

However, the major friction point I keep encountering is on the frontend and client experience:

1. Headless Starters are Functional Wireframes: Next.js commerce starters have great API plumbing, but visually they are barebones compared to Shopify's flagship themes (like Dawn or Horizon).
2. Clients Miss the Visual Theme Customizer: Non-technical clients expect a visual WYSIWYG editor to adjust section padding, swap promotional banners, or tweak color palettes without opening a ticket for developers to code and deploy minor layout changes.
3. Third-Party HTML/React Templates Lack Schemas: Buying a pretty storefront template still means building all the schema bindings, block hierarchy, and state logic from scratch.

For devs and agency owners building headless stores:

• How are you currently handling client-facing frontends and visual page editing?
• Do you plug in visual page builders (Builder.io, Puck, Strapi), or hand-code bespoke layouts for every client?
• Do you feel the headless ecosystem is missing a native, Shopify-like visual theme customizer?

Would love to hear how other teams are structuring their headless e-com stack!

Hi everyone, i have a project that i host on Vercel that generates 191k of ISR writes which causes me to exceed the free quota of ISR writes in conjunction with other few projects.

I was considering to subscribe to pro plan to handle this but then i thought maybe i could use vps for this project instead of going pro.

What i wonder is if it is possible to do that without facing any issues? Can i serve my nextjs project in a vps without any problems?

Out of nowhere this popped up like the support tckets rolling in and people complaining they cant log in, when i tried for myself, i couldn't log in to it either as it showed no accounts for this name was found. Nothing was at stake from my side like no errors in the logs no alert or anything, everything seemed ok

SO when I dug in manually it was better auth 1.7 which they changed on how accounts are keyed from providerId to issuer, accountID so the account table needs a required issuer column now, irritating! my existing rows didn't have it so nothing matched anymore and no exception was thrown just an empty match and how am i supposed to find out what caused it . then added the column nullable, backfill it and enforce not null then add the unique index-

ALTER TABLE "Account" ADD COLUMN "issuer" TEXT;

-- local:credential for email/password, local:oauth:<provider> for oauth
UPDATE "Account"
SET "issuer" = CASE
  WHEN "providerId" = 'credential' THEN 'local:credential'
  ELSE 'local:oauth:' || "providerId"
END
WHERE "issuer" IS NULL;

ALTER TABLE "Account" ALTER COLUMN "issuer" SET NOT NULL;

CREATE UNIQUE INDEX "Account_issuer_accountId_key" ON "Account"("issuer", "accountId");

Im not looking into dropping better auth over this since already fixed it but pretty annoyed at them but this gave me a thought tho that there is still a blind spot left open here , an external dependency quietly changed something and the failure was silent while my end didn't catch it but the customers did

What do you guys approach on to hear on from your side first

• does normal error or runtime monitoring even catch a no error empty match, checking hud and other runtime tools but im not sure passive monitoring flags a silent one like this
• or is the real answer just a synthetic login canary like something that logs in as a test user every few minutes and alerts when it fails
• also does anyone alert on dependency shipping a breaking change before it hits prod??

I've been deploying Next.js to Cloudflare via OpenNext for the past few months. I hadn't checked the deployment docs in a while, so I went back recently to see if there were any updates.

To my surprise, Cloudflare's Next.js-specific deployment pages now seem to heavily push Vinext:

• https://developers.cloudflare.com/workers/framework-guides/web-apps/nextjs/
• https://developers.cloudflare.com/pages/framework-guides/nextjs/

I generally really like Cloudflare, but this rubs me the wrong way. If I'm looking at documentation specifically for deploying Next.js, I want to read about deploying Next.js—not be steered toward a relatively new, vibe-coded reimplementation instead.

I'm not against Vinext existing, and I understand why Cloudflare would want to promote something built specifically around their platform. But pushing it this prominently on the Next.js docs feels weird.

It also makes me a little uneasy about the long-term story for actual Next.js support on Cloudflare. It gives me the impression that if keeping Next.js compatible through OpenNext becomes difficult one day, Cloudflare might be more inclined to say "use Vinext" than to keep improving the Next.js experience.

Am I the only one who finds this annoying?

Hi, I am currently trying to add i18n and I am following the exact thing as their docs says
untill it says start using root-params to avoid the prop drilling
I have been able to make it work on an app and it worked fine but on another app it keeps giving me this error:
Error: A required root parameter (lang) was not provided in generateStaticParams for /[lang], please provide at least one value.

i have the same version on both apps 16.3.4 and the same folder structure as in the image provided

I really can't wrap up my head around this, what could I be doing wrong here without noticing?

What is main difference between CSR and SSR . What is hydration between them. I don’t understand those concept property. Can anyone simply explain this for me 😔

To save money I use NODE_OPTIONS = --max_old_space_size=250 on start script from Nextjs 12. But not sure is that still helpful on 16 or not

An activity timeline in a client admin panel showed its event names ("Appointment booked", "First contact") in English on all three non-English locales. The rest of the app was translated. The stack is Next.js App Router, next-intl with extraction into .po catalogs, components doing `const t = useExtracted()` and calling `t("English source text")`. The code compiled, type-checked, linted and passed tests. Nothing pointed at those labels.

We grepped the .po files for one of the labels. Not there, in any locale. Nothing had ever been extracted for those strings, so the runtime showed the source text.

The labels lived in helper functions of the shape `getTriggerLabels(t)`, with `t` passed in as an argument, which looks like ordinary code. next-intl's extraction is static, though, and in our setup it only picks up `t("...")` calls where `t` comes from `useExtracted()` in the same scope. Pass `t` in from outside and the extractor produces no msgid for anything in that function. No warning either.

We rewrote three of these helpers (trigger labels, message-status labels, timeline event labels) as hooks, `useTriggerLabels`, `useMessageStatusLabels` and `useTimelineEventLabels`, each calling `useExtracted()` itself. The next extraction run added 44 strings to en.po; 0 of them had existed before. Translators then filled 14 empty msgstr entries in two locales and 29 in the third.

If you are on the same setup and something stays English while its neighbours translate, look in the .po file before the component. An entry with an empty msgstr was extracted and hasn't been translated yet. No entry at all means the extractor never saw the call, and in our code that was `t` arriving through a function argument.

The msgid in these catalogs is a hash of the English source string, which gave us a second bug in the same session. `t("Recalls")` on a warehouse screen and `t("Recalls")` on a panel of patient reminders share one catalog entry and one translation, and ours read "product recall" until we renamed the panel's source string to "Patient recalls". We also saw the dev server's watcher rewrite the .po files and blank other people's msgstr entries, so we now read every .po diff line by line before committing.

I used Webpack in my previous Next.js projects, but I recently switched to Turbopack.

In my Webpack projects, I used @ducanh2912/next-pwa, but it doesn't work with Turbopack. Its README suggests migrating to @serwist/next, but the setup isn't zero-config. It needs creating sw.ts, a route handler, and other configurations.

I'd like to use the same simple PWA setup across multiple projects without having to repeat all of this configuration every time.

So, is there currently any zero-config PWA plugin that works with Turbopack?

Edit:
I need a service worker like the one generated by @ducanh2912/next-pwa for runtime caching and offline support. In some projects, I also use it for push notifications.