DEV Community: Junichi Takahashi

Next.js "Getting Started" Stack

Junichi Takahashi — Mon, 11 Aug 2025 13:00:00 +0000

My Favorite Next.js “Getting Started” Stack (2025)

A quick plug

I built starter prompts so a coding agent can spin up my go-to Next.js starter stack in no time🚀
https://www.kakuco.dev/

Quick overview

Libraries

- Lint
    - Biome
- Test
    - Vitest
- CI/CD
    - Husky
    - GitHub Actions
- Schema
    - Zod
- Form
    - React Hook Form
    - shadcn/ui
- Database
    - Prisma
- Auth
    - Clerk
- Payment
    - Stripe
- UI
    - Tailwind CSS
- UI - theme
    - next-themes
- Analytics
    - Google Analytics
      - @next/third-parties
    - vanilla-cookieconsent

Platforms

- App
  - Vercel
- Storage
  - Vercel Blob
- Database
  - Neon

Directory layout

src/
├─ _lib/
├─ _actions/
│  └─ domain/
│     └─ todo.ts
├─ _schemas/
│  └─ domain/
│     └─ todo.ts
├─ _services/
│  ├─ app/
│  └─ domain/
│     └─ todo.ts
├─ _components/
│  ├─ ui/
│  └─ domain/
│     └─ domain/
│        ├─ form.tsx
│        └─ list.tsx
├─ _hooks/
└─ app/
   ├─ examples/
   │  ├─ [id]/
   │  │  └─ page.tsx
   │  └─ page.tsx
   └─ page.tsx

Why I chose each one

As of 2025, I skip explaining the parts that feel like the de-facto choices.

Linting

I considered:

ESLint + Prettier
Biome

Why I picked that:

Simple configuration
Fast

Note: Tailwind class sorting isn’t built in yet, so I use the Tailwind CSS IntelliSense VS Code extension to handle ordering.

Testing

CI/CD

Schema

Forms

Database

I considered:

Prisma
Drizzle ORM

Why I picked that:

Stable behavior
Schema files are easy to read

Auth

I considered both hosted providers and roll-your-own:

Auth0
Clerk
NextAuth
Better Auth

Why I picked that:

Hosted provider
Pricing
Good DX

Payments

UI

UI — Theme switching

Supports toggling themes.

"use client";

import {
  MoonIcon as DarkModeIcon,
  SunIcon  as RootModeIcon,
} from "lucide-react";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";

import { Button } from "@/_components/ui/button";

export default function Component() {
  const { resolvedTheme, setTheme } = useTheme();
  const [mounted, setMounted] = useState(false);

  useEffect(() => setMounted(true), []);

  const next = resolvedTheme === "dark" ? "light" : "dark";

  return (
    <Button onClick={() => setTheme(next)} variant="ghost" size="icon">
      {mounted ? (
        resolvedTheme === "dark" ? (
          <RootModeIcon />
        ) : (
          <DarkModeIcon />
        )
      ) : null}
    </Button>
  );
}

Analytics

Wait for cookie consent before loading analytics tags.

"use client";

import { GoogleAnalytics } from "@next/third-parties/google";
import { useEffect, useState } from "react";

import "vanilla-cookieconsent/dist/cookieconsent.css";
import * as CookieConsent from "vanilla-cookieconsent";

export default function Component({ gaId }: { gaId: string | undefined }) {
  const [acceptedAnalytics, setAcceptedAnalytics] = useState(false);

  useEffect(() => {
    CookieConsent.run({
      categories: {
        necessary: { enabled: true, readOnly: true },
        analytics: {},
      },
      language: {
        default: "en",
        translations: {
          en: {
            consentModal: {
              title: "We use cookies",
              description: "Cookie modal description",
              acceptAllBtn: "Accept all",
              acceptNecessaryBtn: "Reject all",
              showPreferencesBtn: "Manage Individual preferences",
            },
            preferencesModal: {
              title: "Manage cookie preferences",
              acceptAllBtn: "Accept all",
              acceptNecessaryBtn: "Reject all",
              savePreferencesBtn: "Accept current selection",
              closeIconLabel: "Close modal",
              sections: [
                {
                  title: "Somebody said ... cookies?",
                  description: "I want one!",
                },
                {
                  title: "Strictly Necessary cookies",
                  description:
                    "These cookies are essential for the proper functioning of the website and cannot be disabled.",

                  // this field will generate a toggle linked to the 'necessary' category
                  linkedCategory: "necessary",
                },
                {
                  title: "Performance and Analytics",
                  description:
                    "These cookies collect information about how you use our website. All of the data is anonymized and cannot be used to identify you.",
                  linkedCategory: "analytics",
                },
                {
                  title: "More information",
                  description:
                    'For any queries in relation to my policy on cookies and your choices, please <a href="#contact-page">contact us</a>',
                },
              ],
            },
          },
        },
      },
      onConsent() {
        setAcceptedAnalytics(CookieConsent.acceptedCategory("analytics"));
      },
    });
  }, []);

  if (gaId == null) {
    return;
  }

  return acceptedAnalytics ? <GoogleAnalytics gaId={gaId} /> : null;
}

Wrap-up

I’d love to hear your favorite "getting started" stack too-what are you using right now, and why? 🙌

Coputo — Build Remote MCP Server in Seconds with TypeScript

Junichi Takahashi — Thu, 15 May 2025 10:00:00 +0000

Why MCP matters

The Model Context Protocol (MCP) is an open standard that lets AI agents talk to external tools through a clean JSON-RPC interface—think of it as a USB-C port for LLMs and apps instead of yet-another bespoke REST API.

Meet Coputo

Coputo - The TypeScript Remote MCP Server Framework

Coputo is a TypeScript framework that helps you build remote MCP server in a few lines of code.

⚡️ Fast build-time DX – powered by a modern TypeScript stack.
🔐 Tenant-scoped credential storage – a built-in endpoint keeps API keys encrypted server-side.
🪄 Batteries-included examples – so you can curl a working server in minutes.

Quickstart

npm create coputo@latest
cd my-coputo-server
npm run dev

That’s literally all you need to boot an MCP endpoint locally.

Below is the entire code for a working “echo” MCP server. Notice how Coputo keeps everything typed with zod and handles the JSON-RPC plumbing for you.

import { z } from 'zod';
import fastify from 'fastify';
import coputo, { buildMcpToolInputSchema, replySuccess } from 'coputo';

const app = fastify();

const EchoSchema = z.object({ text: z.string() });

app.register(coputo, {
  mcpServers: [
    {
      name: 'echo',
      tools: [
        {
          schema: {
            name: 'echo:text',
            description: 'Echo back the provided text.',
            inputSchema: buildMcpToolInputSchema({ zodSchema: EchoSchema }),
          },
          inputZodSchema: EchoSchema,
          async run({ args }) {
            return replySuccess({ data: args.text });
          },
        },
      ],
    },
  ],
});

app.listen({ port: 3000 });

POST http://localhost:3000/api/mcp
Content-Type: application/json
Accept: application/json

{
  "jsonrpc": "2.0",
  "id": "1",
  "method": "tools/call",
  "params": {
    "name": "echo:text",
    "arguments": { "text": "hi dev.to 👋" }
  }
}

{ "jsonrpc": "2.0", "id": "1", "result": "hi dev.to 👋" }

Built-in multi-tenant secret storage

Real-world tools usually need API tokens.
Coputo ships with an HTTP endpoint that encrypts & stores those tokens per tenant.

POST /api/mcpServerAdapterTokens
Content-Type: application/json
Accept: application/json

{
  "name": "openai",
  "token": "sk-********"
}

Coputo stays out of your way but lets you plug in your own cipher key, IdP/JWT verification, and database store.

Set and get credentials in Production

Under the hood

Piece	What Coputo uses
Server	[Fastify] for speed & plugin ecosystem
Types	Full end-to-end TypeScript with `zod` schemas
Protocol	JSON-RPC 2.0 bindings that follow the MCP spec
Security	AES-256 encryption (configurable) for stored tokens
Testing	Vitest out of the box

Roadmap

Web UI for tenant management (tokens & usage metrics)
Adapters for Stripe, GitHub, Notion, and more out of the box
Edge deployment recipes (Cloudflare Workers, Vercel, Fly)

PRs and GitHub Stars are welcome! 🌟

Get involved

GitHub: coputo-dev/coputo (leave a ⭐ if you like it)
Discord: Join the community and say hi

Final thoughts

If you’re playing with agents, tool calling, or just want a type-safe home for that baby MCP server idea, give Coputo a whirl.
I’d love to hear what you build—drop a comment or open an issue anytime.

Happy hacking! 🛠️✨