How to Implement llms.txt in Next.js

Adding llms.txt to your Next.js application is straightforward. This guide covers multiple approaches so you can choose what works best for your project.

Option 1: Static File in Public Directory

The simplest approach is to add a static file to your public folder.

Create public/llms.txt:

# Your Product Name

> A brief description of what your product does.

## Documentation

- [Getting Started](/docs/getting-started)
- [API Reference](/docs/api)
- [Examples](/docs/examples)

That's it. Next.js automatically serves files from public at the root path, so your file will be available at yoursite.com/llms.txt.

Pros: Simple, no code required Cons: Content is static, can't be generated dynamically

Option 2: Route Handler (App Router)

For dynamic content, use a Route Handler. This is ideal if your documentation structure changes or you want to generate the file programmatically.

Create app/llms.txt/route.ts:

export async function GET() {
  const content = `# Your Product Name

> A brief description of what your product does.

## Documentation

- [Getting Started](https://yoursite.com/docs/getting-started)
- [API Reference](https://yoursite.com/docs/api)
- [Examples](https://yoursite.com/docs/examples)

## Features

- Feature one
- Feature two
- Feature three
`;

  return new Response(content, {
    headers: {
      'Content-Type': 'text/plain',
    },
  });
}

Pros: Dynamic content, can fetch from CMS or database Cons: Slightly more complex setup

Option 3: Dynamic Generation from Docs

If you have a docs folder with MDX files, you can automatically generate llms.txt from your documentation structure.

import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';

export async function GET() {
  const docsDir = path.join(process.cwd(), 'content/docs');
  const files = fs.readdirSync(docsDir);

  const docs = files
    .filter(file => file.endsWith('.mdx'))
    .map(file => {
      const content = fs.readFileSync(
        path.join(docsDir, file),
        'utf-8'
      );
      const { data } = matter(content);
      const slug = file.replace('.mdx', '');
      return {
        title: data.title,
        url: `https://yoursite.com/docs/${slug}`
      };
    });

  const content = `# Your Product Name

> Your product description here.

## Documentation

${docs.map(doc => `- [${doc.title}](${doc.url})`).join('\n')}
`;

  return new Response(content, {
    headers: {
      'Content-Type': 'text/plain',
    },
  });
}

Pros: Always in sync with your docs Cons: More complex, requires consistent frontmatter

Best Practices

1. Use Absolute URLs

AI systems may not have context about your domain, so use full URLs:

# Good
- [API Docs](https://yoursite.com/docs/api)

# Avoid
- [API Docs](/docs/api)

2. Keep It Focused

Don't list every page. Focus on the most important resources that help AI understand your product:

• Main documentation pages
• API references
• Getting started guides
• Key feature explanations

3. Update Regularly

If your documentation changes significantly, update your llms.txt. Consider automating this with Option 3.

4. Test It

After deployment, verify your file is accessible:

curl https://yoursite.com/llms.txt

Adding to llms-full.txt

Some sites also provide an llms-full.txt that includes more comprehensive content. You can use the same approaches above, just with more detailed information.

Verification

Once deployed, you can submit your site to directories like llmstxt.directory to help others discover your AI-friendly documentation.

The implementation is simple, but the impact on how AI represents your product can be significant. Take 10 minutes to add llms.txt to your Next.js site today.