스킬 nextjs-architecture
🏗️

nextjs-architecture

안전 🌐 네트워크 접근⚙️ 외부 명령어

Projetar Arquitetura Next.js

또한 다음에서 사용할 수 있습니다: Joseph OBrien

Construir aplicações Next.js exige entender App Router, Server Components e padrões de desempenho. Esta skill oferece orientação de arquitetura especializada para projetar, migrar e otimizar aplicações Next.js com padrões modernos.

지원: Claude Codex Code(CC)
🥉 72 브론즈
1

스킬 ZIP 다운로드

2

Claude에서 업로드

설정 → 기능 → 스킬 → 스킬 업로드로 이동

3

토글을 켜고 사용 시작

테스트해 보기

"nextjs-architecture" 사용 중입니다. Design the architecture for a SaaS dashboard with authentication and analytics

예상 결과:

  • Estrutura de pastas recomendada com grupos de rotas para auth e dashboard
  • Padrões de Server Component para busca de dados em cada seção
  • Estratégia de composição de layouts com layouts aninhados
  • Organização de rotas de API para endpoints de backend
  • Recomendações de desempenho para a página de analytics

"nextjs-architecture" 사용 중입니다. How do I migrate from Pages Router to App Router?

예상 결과:

  • Guia de migração passo a passo para conversão de layouts
  • Padrões de transformação de arquivos de página com exemplos de código
  • Migração de busca de dados de getServerSideProps para componentes async
  • Migração de getStaticPaths para generate static params

"nextjs-architecture" 사용 중입니다. What are the performance optimization strategies for Next.js?

예상 결과:

  • Recomendações de geração estática para páginas com muito conteúdo
  • Configuração de ISR para conteúdo atualizado com frequência
  • Limites de Suspense para carregamento progressivo de dados
  • Estratégias de otimização de imagens e divisão de código

보안 감사

안전
v3 • 1/16/2026

Pure prompt-based skill containing only YAML frontmatter and markdown documentation. No executable code, file system access, network calls, or command execution capabilities. All 43 static findings are false positives triggered by documentation patterns: C2 keywords are common tech terms, cryptographic algorithm flags are TypeScript syntax, and shell backtick detections are markdown code fences.

2
스캔된 파일
332
분석된 줄 수
2
발견 사항
3
총 감사 수
감사자: claude 감사 이력 보기 →

품질 점수

38
아키텍처
100
유지보수성
85
콘텐츠
31
커뮤니티
100
보안
100
사양 준수

만들 수 있는 것

Projetar Estrutura da Aplicação

Criar layouts de projeto Next.js escaláveis com organização adequada de rotas e layouts compartilhados.

Migrar para App Router

Converter aplicações Pages Router para App Router com padrões adequados de Server Component.

Otimizar Desempenho

Aplicar estratégias de renderização como geração estática, ISR e streaming para produção.

이 프롬프트를 사용해 보세요

Projetar arquitetura
Projetar a arquitetura para esta aplicação Next.js
Migrar para App Router
Migrar este app Pages Router para App Router
Implementar Server Components
Implementar Server Components para esta funcionalidade
Otimizar desempenho
Otimizar esta página para desempenho em produção

모범 사례

  • Use Server Components como padrão e adicione use client apenas quando necessário
  • Aplique geração estática para conteúdo que muda com pouca frequência
  • Use limites de Suspense para transmitir dados lentos sem bloquear a página

피하기

  • Converter todos os componentes para Client Components desnecessariamente
  • Buscar dados em Client Components quando Server Components podem lidar com isso
  • Ignorar limites de Suspense para consultas lentas ao banco de dados

자주 묻는 질문

Quais versões do Next.js suportam App Router?
App Router requer Next.js 13 ou superior. Versão 14+ recomendada para uso em produção.
Qual é a diferença entre Server e Client Components?
Server Components são renderizados no servidor e reduzem o tamanho do bundle. Client Components são executados no navegador.
Posso usar esta skill com projetos Next.js existentes?
Sim. A skill fornece orientação tanto para novos projetos quanto para migrações de Pages Router.
Esta skill modifica meus arquivos de projeto?
Não. Esta skill fornece recomendações de arquitetura. Você aplica as mudanças manualmente no seu codebase.
Quais estratégias de renderização esta skill cobre?
Geração estática, ISR, SSR e streaming com Suspense para carregamento progressivo.
Como isso se compara à documentação padrão do Next.js?
Esta skill fornece padrões arquiteturais curados e orientação prática de migração além da documentação básica.

개발자 세부 정보

파일 구조

📄 SKILL.md