mcp-oauth copilot-instructions.md

mcp-nextjs

Project Overview

This is a Next.js-based application that provides an MCP (Model Context Protocol) server with OAuth 2.1 authentication support. It is intended as a model for building your own MCP server in a Next.js context. It uses the @vercel/mcp-adapter to handle the MCP protocol, in order to support both SSE and Streamable HTTP transports.

Tech Stack

• next.js
• @vercel/mcp-adapter
• vercel
• drizzle orm
• better-auth

Best Practices

Here are some best practices for the tools you listed, keeping in mind a collaborative and efficient approach:

Next.js

Next.js is a powerful React framework that enables features like server-side rendering (SSR) and static site generation (SSG) out of the box. To make the most of it, here's a simple best practices guide:

1. Leverage Data Fetching Methods Appropriately

Next.js offers several ways to fetch data, each with its own use case:

• getStaticProps (Static Site Generation - SSG):

  • When to use: For data that can be fetched at build time and is the same for all users. Ideal for blogs, marketing pages, documentation, etc.
  • Benefit: Extremely fast as pages are pre-rendered as HTML and served from a CDN.
  • Example:

    export async function getStaticProps() {
      const res = await fetch('https://api.example.com/posts');
      const posts = await res.json();
      return {
        props: {
          posts,
        },
        revalidate: 60, // Optional: Re-generate page every 60 seconds (ISR)
      };
    }
    

• getServerSideProps (Server-Side Rendering - SSR):

  • When to use: For data that needs to be fetched on each request and is dynamic (e.g., user-specific data, real-time dashboards).
  • Benefit: Always up-to-date data, but slower than SSG as the server renders the page on every request.
  • Example:

    export async function getServerSideProps(context) {
      const res = await fetch(`https://api.example.com/user/${context.params.id}`);
      const userData = await res.json();
      return {
        props: {
          userData,
        },
      };
    }