Guide Next.js App Router implementation with file-based routing and component boundaries.
npx skills add https://github.com/mrdulasolutions/DevLearn --skill devlearn-next
Please help me install this Agent Skill. Skill: devlearn-next Source: https://github.com/mrdulasolutions/DevLearn/tree/main/devlearn-next Command: npx skills add https://github.com/mrdulasolutions/DevLearn --skill devlearn-next
It fixes confusion and mistakes when teaching or implementing Next.js App Router projects, especially around routing, server vs client components, and data fetching.
app/ folders to URL paths and explains page.tsx and layout.tsx roles.'use client' for interactivity.fetch, route.ts handlers for mutations, and optional Server Actions for form-driven workflows.process.env vs NEXT_PUBLIC_* and reinforces restarting dev after .env changes.Teach your agent to update your Next.js App Router by converting a specific route segment in app/ (using page.tsx and layout.tsx) while choosing the correct Server vs Client boundary for any interactivity.
High-intent search queries and answers about installing and using this skill.
Next.js App Router maps folders inside the `app/` directory to URL paths. You define UI using `page.tsx` for route content and `layout.tsx` for shared wrapping components across nested segments.
Add the `'use client'` directive when a component requires interactivity, state, or browser APIs. Keep components as Server Components by default to leverage server-side data fetching and reduce client bundle size.
Data fetching in Next.js server components can use the native `fetch` API directly. This allows caching and revalidation configuration at the request level without needing extra client-side fetching libraries.
Use `route.ts` files within the `app/` directory to create route handlers for API mutations. This approach processes requests like standard web APIs and works well alongside server components.
Yes, you must restart your development server after changing `.env` files. Next.js loads environment variables at startup, so updates to `process.env` or `NEXT_PUBLIC_*` will not apply until restart.
`NEXT_PUBLIC_` variables are exposed to the browser, while standard `process.env` variables remain server-only. This boundary ensures sensitive secrets stay secure within server components and route handlers.
flavien-iaConfigures internationalization for Next.js App Router projects using the next-intl library with SEO-friendly locale routing.
LennyDevXBuild and deploy NuxChain production assets to Vercel with environment synchronization.
SufficientDaikonGuide React Server Component architecture design in Next.js App Router applications.
xenitV1Architect Next.js App Router patterns for server rendering, routing, and data flow.