scaffold-nextjs-app

pjt222

Actualizado 2 days ago

3 vistas

Metareactapi

Acerca de

Esta habilidad estructura una nueva aplicación Next.js utilizando el App Router y TypeScript con configuraciones modernas y listas para producción. Configura la estructura del proyecto, el enrutamiento y la configuración inicial para una aplicación web full-stack con SSR y rutas API. Úsala para inicializar rápidamente un nuevo proyecto web en TypeScript desde cero.

Instalación rápida

Claude Code

Recomendado

Principal

npx skills add pjt222/agent-almanac -a claude-code

Comando PluginAlternativo

/plugin add https://github.com/pjt222/agent-almanac

Git CloneAlternativo

git clone https://github.com/pjt222/agent-almanac.git ~/.claude/skills/scaffold-nextjs-app

Copia y pega este comando en Claude Code para instalar esta habilidad

Documentación

Scaffold Next.js App

Create new Next.js w/ App Router, TS, prod-ready defaults.

Use When

New web app project
React frontend w/ SSR
Full-stack w/ API routes
TS web from scratch

In

Required: App name
Required: Pkg mgr (npm|yarn|pnpm)
Optional: Tailwind (default yes)
Optional: ESLint (default yes)
Optional: src/ structure (default yes)

Do

Step 1: Create Project

npx create-next-app@latest my-app \
  --typescript \
  --tailwind \
  --eslint \
  --app \
  --src-dir \
  --import-alias "@/*"

Answer prompts or use flags non-interactive.

→ Project dir created w/ all deps installed.

If err: check Node ver (node --version, must ≥18.17). npx available. Hangs on prompts → add --use-npm (or --use-pnpm|--use-yarn).

Step 2: Verify Structure

my-app/
├── src/
│   ├── app/
│   │   ├── layout.tsx        # Root layout
│   │   ├── page.tsx          # Home page
│   │   ├── globals.css       # Global styles
│   │   └── favicon.ico
│   └── lib/                  # Shared utilities (create manually)
├── public/                   # Static assets
├── next.config.ts            # Next.js configuration
├── tailwind.config.ts        # Tailwind configuration
├── tsconfig.json             # TypeScript configuration
├── package.json
└── .eslintrc.json

→ All listed dirs+files present.

If err: src/ missing → --src-dir not passed. Re-run or move files manually → src/app/.

Step 3: Configure Next.js

Edit next.config.ts:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  // Enable React strict mode
  reactStrictMode: true,

  // Image optimization domains
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "example.com",
      },
    ],
  },
};

export default nextConfig;

→ Saved w/o TS errs.

If err: .js instead of .ts → rename. Ensure NextConfig imported from "next".

Step 4: Dir Conventions

mkdir -p src/app/api
mkdir -p src/components
mkdir -p src/lib
mkdir -p src/types

→ All 4 dirs under src/.

If err: no src/ → create first or adjust paths (non-src layout uses app/ at root).

Step 5: Base Layout

Edit src/app/layout.tsx:

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "My Application",
  description: "Application description",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

→ Layout renders w/ Inter font, wraps all pages.

If err: font fails → check net. Replace Inter w/ system fallback temp.

Step 6: Example API Route

Create src/app/api/health/route.ts:

import { NextResponse } from "next/server";

export async function GET() {
  return NextResponse.json({ status: "ok", timestamp: new Date().toISOString() });
}

→ File created at path.

If err: ensure api/health/ exists. Must export named HTTP method handlers (GET, POST, etc.), not default.

Step 7: Run Dev Server

cd my-app
npm run dev

→ App at http://localhost:3000.

If err: check Node ≥18.17. Run npm install if deps missing.

Check

Traps

Node ver: Needs ≥18.17. Check node --version.
Port conflict: 3000 in use → npm run dev -- -p 3001.
Import alias confusion: @/* → src/*. Don't confuse w/ node_modules.
Pages vs App Router: Use App Router (src/app/) not Pages (src/pages/).

→

setup-tailwind-typescript — detailed Tailwind + TS config
deploy-to-vercel — deploy scaffold
configure-git-repository — version control

Repositorio GitHub

pjt222/agent-almanac

Ruta: i18n/caveman-ultra/skills/scaffold-nextjs-app

agentsagentskillsai-assisted-developmentclaude-codeskillsteams

Habilidades relacionadas

content-collections

Meta

Esta habilidad proporciona una configuración probada en producción para Content Collections, una herramienta centrada en TypeScript que transforma archivos Markdown/MDX en colecciones de datos con tipado seguro mediante validación Zod. Úsala al construir blogs, sitios de documentación o aplicaciones Vite + React con mucho contenido para garantizar seguridad de tipos y validación automática de contenido. Abarca todo, desde la configuración del plugin de Vite y compilación MDX hasta la optimización de despliegue y validación de esquemas.

Ver habilidad

polymarket

Meta

Esta habilidad permite a los desarrolladores crear aplicaciones con la plataforma de mercados de predicción Polymarket, incluyendo la integración de API para operaciones y datos de mercado. También proporciona transmisión de datos en tiempo real a través de WebSocket para monitorear operaciones en vivo y actividad del mercado. Úsela para implementar estrategias de trading o crear herramientas que procesen actualizaciones de mercado en tiempo real.

Ver habilidad

creating-opencode-plugins

Meta

Esta habilidad ayuda a los desarrolladores a crear complementos de OpenCode que se conectan a más de 25 tipos de eventos, como comandos, archivos y operaciones LSP. Proporciona la estructura del complemento, las especificaciones de la API de eventos y los patrones de implementación para módulos en JavaScript/TypeScript. Úsala cuando necesites interceptar, monitorear o extender el ciclo de vida del asistente de IA de OpenCode con lógica personalizada basada en eventos.

Ver habilidad

sglang

Meta

SGLang es un framework de alto rendimiento para el servicio de LLM que se especializa en generación rápida y estructurada para JSON, expresiones regulares y flujos de trabajo de agentes utilizando su caché de prefijos RadixAttention. Ofrece una inferencia significativamente más rápida, especialmente para tareas con prefijos repetidos, lo que lo hace ideal para salidas complejas y estructuradas, y conversaciones multiturno. Elige SGLang sobre alternativas como vLLM cuando necesites decodificación restringida o estés construyendo aplicaciones con uso extensivo de prefijos compartidos.

Ver habilidad