Next.js + TypeScript Starter

Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Next.js + TypeScript Starter</title>
<style>
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: #0a0a0f;
    color: #e2e8f0;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
  }

  .card {
    max-width: 640px;
    width: 100%;
    background: linear-gradient(135deg, rgba(34,211,238,0.04), rgba(59,130,246,0.04));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #22d3ee, #3b82f6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    flex-shrink: 0;
  }

  .header h1 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f1f5f9;
  }

  .header p {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 2px;
  }

  h2 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #22d3ee;
    margin-bottom: 0.5rem;
  }

  .cli-block {
    background: #111118;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.82rem;
    line-height: 1.7;
    color: #cbd5e1;
    overflow-x: auto;
  }

  .cli-block .prompt { color: #22d3ee; }
  .cli-block .flag { color: #a78bfa; }
  .cli-block .comment { color: #475569; }

  .tree {
    background: #111118;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.78rem;
    line-height: 1.65;
    color: #94a3b8;
  }

  .tree .dir { color: #3b82f6; }
  .tree .file { color: #cbd5e1; }
  .tree .config { color: #a78bfa; }

  .key-files {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .key-file {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    font-size: 0.82rem;
  }

  .key-file code {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.78rem;
    background: rgba(59,130,246,0.12);
    color: #60a5fa;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .key-file span {
    color: #94a3b8;
  }

  .extend-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .extend-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
  }

  .extend-item strong {
    font-size: 0.8rem;
    color: #f1f5f9;
    display: block;
    margin-bottom: 2px;
  }

  .extend-item span {
    font-size: 0.72rem;
    color: #64748b;
  }

  .links {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 0.25rem;
    border-top: 1px solid rgba(255,255,255,0.06);
  }

  .links a {
    font-size: 0.78rem;
    color: #22d3ee;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: color 0.2s;
  }

  .links a:hover { color: #67e8f9; }
  .links a::before { content: '->'; font-family: monospace; font-size: 0.7rem; }
</style>
</head>
<body>
  <div class="card">
    <div class="header">
      <div class="icon">N</div>
      <div>
        <h1>Next.js + TypeScript</h1>
        <p>App Router, Tailwind CSS, Turbopack &amp; Server Components</p>
      </div>
    </div>

    <section>
      <h2>Quick Start</h2>
      <div class="cli-block">
        <span class="prompt">$</span> npx create-next-app@latest my-app <span class="flag">--ts</span><br/>
        <span class="prompt">$</span> cd my-app<br/>
        <span class="prompt">$</span> npm run dev <span class="comment"># http://localhost:3000</span>
      </div>
    </section>

    <section>
      <h2>Project Structure</h2>
      <div class="tree">
        <span class="dir">my-app/</span><br/>
        ├── <span class="dir">app/</span><br/>
        │   ├── <span class="dir">fonts/</span><br/>
        │   ├── <span class="file">favicon.ico</span><br/>
        │   ├── <span class="file">globals.css</span><br/>
        │   ├── <span class="file">layout.tsx</span><br/>
        │   └── <span class="file">page.tsx</span><br/>
        ├── <span class="dir">public/</span><br/>
        │   ├── <span class="file">next.svg</span><br/>
        │   └── <span class="file">vercel.svg</span><br/>
        ├── <span class="config">next.config.ts</span><br/>
        ├── <span class="config">tailwind.config.ts</span><br/>
        ├── <span class="config">postcss.config.mjs</span><br/>
        ├── <span class="config">tsconfig.json</span><br/>
        └── <span class="file">package.json</span>
      </div>
    </section>

    <section>
      <h2>Key Files</h2>
      <div class="key-files">
        <div class="key-file">
          <code>next.config.ts</code>
          <span>Redirects, rewrites, image domains, experiments</span>
        </div>
        <div class="key-file">
          <code>app/layout.tsx</code>
          <span>Root layout with fonts, metadata, providers</span>
        </div>
        <div class="key-file">
          <code>app/page.tsx</code>
          <span>Home route — React Server Component by default</span>
        </div>
        <div class="key-file">
          <code>tsconfig.json</code>
          <span>Pre-configured with @/* path alias</span>
        </div>
      </div>
    </section>

    <section>
      <h2>Extend With</h2>
      <div class="extend-grid">
        <div class="extend-item">
          <strong>Prisma</strong>
          <span>Type-safe database ORM</span>
        </div>
        <div class="extend-item">
          <strong>NextAuth.js</strong>
          <span>OAuth &amp; credential auth</span>
        </div>
        <div class="extend-item">
          <strong>tRPC</strong>
          <span>End-to-end type-safe APIs</span>
        </div>
        <div class="extend-item">
          <strong>MDX</strong>
          <span>Markdown with JSX components</span>
        </div>
      </div>
    </section>

    <div class="links">
      <a href="https://nextjs.org/docs/app/getting-started/installation">Next.js Docs</a>
      <a href="https://react.dev/">React Docs</a>
      <a href="https://github.com/ixartz/Next-js-Boilerplate">Community Boilerplate (12.8k+)</a>
    </div>
  </div>
</body>
</html>

Next.js + TypeScript Starter

The official Next.js scaffolding tool sets up a full-stack React framework with the App Router, TypeScript, Tailwind CSS, and Turbopack for instant dev builds.

Quick Start

npx create-next-app@latest my-app --ts
cd my-app
npm run dev

The interactive CLI prompts you for Tailwind CSS, ESLint, src/ directory, App Router, and Turbopack preferences. All are recommended defaults.

What You Get

App Router — File-based routing with layouts, loading states, and error boundaries
React Server Components — Server-first rendering with zero client JS by default
TypeScript — Strict mode, automatic type generation for routes
Tailwind CSS — Pre-configured with PostCSS and the Next.js plugin
Turbopack — Rust-based bundler for near-instant HMR in development
ESLint — eslint-config-next with Core Web Vitals rules
Font Optimization — next/font for self-hosted fonts with zero layout shift

Generated Project Structure

my-app/
├── app/
│   ├── fonts/
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── public/
│   ├── file.svg
│   ├── globe.svg
│   ├── next.svg
│   ├── vercel.svg
│   └── window.svg
├── next.config.ts
├── package.json
├── postcss.config.mjs
├── tailwind.config.ts
└── tsconfig.json

Key Files

next.config.ts — Framework configuration: redirects, rewrites, image domains, experimental features.
app/layout.tsx — Root layout wrapping all pages. Set global fonts, metadata, and providers here.
app/page.tsx — Home route (/). A React Server Component by default.
tsconfig.json — Pre-configured with @/* path alias mapping to the project root.

Extend With

Tool	Purpose
Prisma	Type-safe ORM for database access
NextAuth.js	Authentication with OAuth, credentials, and magic links
tRPC	End-to-end type-safe APIs without code generation
MDX	Markdown with JSX for content-heavy pages
Vercel AI SDK	Streaming AI responses with React Server Components

References

Next.js Installation Guide — Official docs for project setup and configuration
ixartz/Next-js-Boilerplate (12.8k+ stars) — Community boilerplate with testing, CI/CD, Storybook, and more