Robots.txt configuration in NextJS - Mini Project: Build & Apply

Robots.txt Configuration in Next.js

📖 Scenario: You are building a website using Next.js. You want to control how search engines find and index your pages. To do this, you will create a robots.txt file that tells search engines which pages to crawl and which to avoid.

🎯 Goal: Create a robots.txt file in a Next.js project that allows all search engines to crawl the homepage and blocks them from crawling the /admin page.

📋 What You'll Learn

Create a robots.txt file with the exact content to allow all user agents to crawl the homepage

Disallow crawling of the /admin path

Serve the robots.txt file correctly from the Next.js public folder

Verify the robots.txt file is accessible at /robots.txt in the browser

💡 Why This Matters

🌍 Real World

Websites use <code>robots.txt</code> files to control how search engines crawl and index their pages. This helps protect private areas and improve SEO.

💼 Career

Knowing how to configure <code>robots.txt</code> is important for web developers and SEO specialists to manage site visibility and search engine behavior.

1

Create the robots.txt file

Create a file named robots.txt inside the public folder of your Next.js project. Add these exact lines to the file:
User-agent: *
Allow: /

NextJS

# Create the robots.txt file in the public folder with the required lines
# Your code here

Hint

The robots.txt file must be placed inside the public folder so Next.js can serve it automatically.

2

Add disallow rule for /admin path

Add a line to the existing robots.txt file to disallow all user agents from crawling the /admin path. The line should be exactly Disallow: /admin.

NextJS

User-agent: *
Allow: /
# Add the disallow rule for /admin below
# Your code here

Hint

The Disallow directive tells search engines not to crawl the specified path.

3

Verify robots.txt is served by Next.js

Run your Next.js development server and verify that the robots.txt file is accessible by visiting http://localhost:3000/robots.txt in your browser.

NextJS

User-agent: *
Allow: /
Disallow: /admin
# Run the Next.js server and check the URL /robots.txt
# Your code here

Hint

Next.js automatically serves files placed in the public folder at the root URL path.

4

Add meta tag for robots in the homepage

Open the pages/index.js file and add a <meta name="robots" content="index, follow" /> tag inside the <head> section to explicitly allow search engines to index and follow links on the homepage.

NextJS

import Head from 'next/head';

export default function Home() {
  return (
    
      
        {/* Add the meta robots tag below */}
        {/* Your code here */}
      
      
        Welcome to the homepage
      
    
  );
}

Hint

The meta tag inside the <head> helps search engines understand how to treat this page.

Practice

1. What is the main purpose of a robots.txt file in a Next.js project?

easy

A. To manage server-side rendering

B. To tell search engines which pages to crawl or not crawl

C. To store user data securely

D. To style the website pages

Solution

1. Step 1: Understand the role of robots.txt

   The robots.txt file is used to communicate with search engines about which parts of the website they can access.

2. Step 2: Identify its purpose in Next.js

   In Next.js, it is used the same way as in other web projects: to allow or block search engine crawlers from certain pages.

3. Final Answer:

   To tell search engines which pages to crawl or not crawl -> Option B

4. Quick Check:

   robots.txt controls crawler access = D [OK]

Hint: robots.txt controls search engine access [OK]

Common Mistakes:

• Confusing robots.txt with CSS or styling files
• Thinking robots.txt stores user data
• Assuming robots.txt manages rendering

2. Which of the following is the correct way to serve a robots.txt file using an API route in Next.js?

easy

A. export default function handler(req, res) { res.setHeader('Content-Type', 'text/html'); res.send('User-agent: *Disallow: /private'); }

B. export default function handler(req, res) { res.setHeader('Content-Type', 'application/json'); res.send({ 'User-agent': '*', 'Disallow': '/private' }); }

C. export default function handler(req, res) { res.setHeader('Content-Type', 'text/plain'); res.send('User-agent: *\nDisallow: /private'); }

D. export default function handler(req, res) { res.setHeader('Content-Type', 'application/javascript'); res.send('User-agent: *\nDisallow: /private'); }

Solution

1. Step 1: Check the content type for robots.txt

   The robots.txt file must be served as plain text, so the header should be text/plain.

2. Step 2: Verify the response content format

   The content must be plain text lines, not JSON or HTML, so the string with newlines is correct.

3. Final Answer:

   export default function handler(req, res) { res.setHeader('Content-Type', 'text/plain'); res.send('User-agent: *\nDisallow: /private'); } -> Option C

4. Quick Check:

   robots.txt served as plain text = A [OK]

Hint: robots.txt must be served as plain text [OK]

Common Mistakes:

• Using JSON or HTML content type instead of text/plain
• Sending JSON object instead of plain text string
• Forgetting to set Content-Type header

3. Given this Next.js API route code for robots.txt:

export default function handler(req, res) {
  res.setHeader('Content-Type', 'text/plain');
  res.send(`User-agent: *\nDisallow: /admin\nAllow: /public`);
}

What will search engines do when they read this robots.txt?

medium

A. They will block crawling of /admin but allow /public and other pages

B. They will allow crawling of all pages including /admin

C. They will block crawling of all pages including /public

D. They will ignore the file because of syntax errors

Solution

1. Step 1: Read the robots.txt rules

   The file says User-agent: * (all bots), Disallow: /admin (block /admin), and Allow: /public (allow /public).

2. Step 2: Understand the effect on crawling

   Search engines will not crawl /admin but will crawl /public and other pages not disallowed.

3. Final Answer:

   They will block crawling of /admin but allow /public and other pages -> Option A

4. Quick Check:

   Disallow /admin, Allow /public = C [OK]

Hint: Disallow blocks, Allow permits specific paths [OK]

Common Mistakes:

• Thinking Allow overrides Disallow globally
• Assuming all pages are blocked
• Confusing syntax causing ignored file

4. You wrote this Next.js API route for robots.txt:

export default function handler(req, res) {
  res.setHeader('Content-Type', 'text/plain')
  res.send('User-agent: *\nDisallow: /secret')
}

But when you visit /api/robots.txt, the browser downloads a file instead of showing text. What is the likely cause?

medium

A. The API route is correct; browser behavior depends on browser settings

B. The Content-Type header should be 'text/html' not 'text/plain'

C. The browser treats text/plain as a download, so you must add Content-Disposition header

D. Missing semicolons cause syntax error

Solution

1. Step 1: Check the code syntax

   The code is valid JavaScript; semicolons are optional in this context and do not cause errors.

2. Step 2: Understand browser behavior for text/plain

   Browsers may display or download text/plain files depending on settings; this is normal and not an error in the API.

3. Final Answer:

   The API route is correct; browser behavior depends on browser settings -> Option A

4. Quick Check:

   text/plain may download = A [OK]

Hint: text/plain may download depending on browser [OK]

Common Mistakes:

• Assuming missing semicolons cause errors
• Changing Content-Type to text/html incorrectly
• Adding unnecessary headers to force display

5. You want to block all search engines from crawling any page except the homepage and the /blog section in your Next.js app. Which robots.txt content served via API route achieves this correctly?

hard

A. User-agent: *\nDisallow: /\nAllow: /\nAllow: /blog/

B. User-agent: *\nDisallow: /\nAllow: /\nAllow: /blog

C. User-agent: *\nDisallow: /\nAllow: /index.html\nAllow: /blog/

D. User-agent: *\nDisallow: /\nAllow: /$\nAllow: /blog/

Solution

1. Step 1: Understand the goal

   Block all pages except homepage and /blog section. Homepage is usually root path '/' only.

2. Step 2: Use correct syntax for homepage allowance

   To allow only the homepage, use Allow: /$ which matches exactly the root URL, not all paths starting with '/'.

3. Step 3: Allow /blog/ section

   Allowing /blog/ lets crawlers access all pages under /blog.

4. Final Answer:

   User-agent: *\nDisallow: /\nAllow: /$\nAllow: /blog/ -> Option D

5. Quick Check:

   Disallow all except root and /blog = B [OK]

Hint: Use Allow: /$ to allow only homepage [OK]

Common Mistakes:

• Allowing '/' allows all pages, not just homepage
• Using Allow: /blog without trailing slash misses subpages
• Confusing homepage URL with /index.html