nextjs-frontend-guidelines

Guide Next.js 15 frontend architecture with App Router and TypeScript patterns.

Updated Aug 27, 2026

Search Tags:#frontend #localization #nextjs #tailwind #shadcn-ui #app-router #server-components

Ready to run

npx skills add https://github.com/g00hyun/okky-vibe-aaa --skill nextjs-frontend-guidelines-g00hyun

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: nextjs-frontend-guidelines
Source: https://github.com/g00hyun/okky-vibe-aaa/tree/main/.claude/skills/nextjs-frontend-guidelines
Command: npx skills add https://github.com/g00hyun/okky-vibe-aaa --skill nextjs-frontend-guidelines-g00hyun

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide helps frontend teams adopt Next.js 15 App Router patterns, server vs client component strategies, and a cohesive shadcn/ui + Tailwind CSS 4 approach for the YGS project, reducing boilerplate and ensuring consistent architecture.

Core Features & Use Cases

Patterns for components, pages, API routes, data fetching, and styling across a Next.js + React + TypeScript stack.
Guidance on multi-method authentication (Firebase, Kakao, JWT), Korean localization, and admin dashboard patterns.
Practical scenarios including component creation, page building, API route setup, and performance optimizations.

Quick Start

Read the resources directory to apply the recommended frontend patterns to a sample project.

Frequently Asked Questions about nextjs-frontend-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I structure server and client components in a Next.js 15 App Router project?▼

Structure server and client components in Next.js 15 by enforcing strict separation boundaries. This Skill provides architectural patterns to optimize data fetching on the server while isolating interactivity into client components, ensuring type-safe React 19 implementations.

What is the best way to set up Tailwind CSS 4 and shadcn/ui in Next.js?▼

The best way to set up Tailwind CSS 4 and shadcn/ui is applying a cohesive styling approach. This Skill provides frontend guidelines to reduce boilerplate and ensure consistent component architecture across your Next.js application.

How do I implement multi-method authentication with Firebase, Kakao, and JWT in Next.js?▼

Implement multi-method authentication in Next.js by applying integrated Firebase, Kakao, and JWT patterns. This Skill provides practical guidance for configuring these diverse authentication methods within your App Router architecture.

Can I use TypeScript type-safe patterns for API routes and data fetching in Next.js 15?▼

Yes, you can use TypeScript type-safe patterns for API routes and data fetching in Next.js 15. This Skill outlines practical scenarios for building API routes and fetching data while maintaining strict type safety across your React 19 components.

Does this Next.js frontend guide include Korean localization patterns?▼

Yes, this Next.js frontend guide includes Korean localization patterns. It provides specific architectural decisions and implementation guidance to properly integrate localization into your Next.js App Router pages and components.