Robots.txt configuration in NextJS - Performance & Optimization

Performance: Robots.txt configuration

MEDIUM IMPACT

This affects how search engines crawl and index your site, indirectly impacting SEO and server load during crawling.

Controlling search engine crawling to reduce server load

NextJS

User-agent: *
Disallow: /api/
Disallow: /admin/
Allow: /

Blocks bots from crawling heavy or sensitive paths, reducing server load and crawl waste.

📈 Performance GainReduces unnecessary requests, lowering server CPU and bandwidth usage during crawling

Controlling search engine crawling to reduce server load

NextJS

User-agent: *
Disallow:

Allows all bots to crawl every page, causing high server load and wasted crawl budget.

📉 Performance CostIncreases server requests during peak times, potentially slowing response for users

Performance Comparison

Pattern	Server Requests	Crawl Efficiency	User Impact	Verdict
Allow all paths	High (all pages crawled)	Low (wastes crawl budget)	Potential slowdowns under load	[X] Bad
Block heavy paths	Lower (fewer pages crawled)	High (focus on important pages)	Better server responsiveness	[OK] Good

Rendering Pipeline

Robots.txt is fetched by crawlers before rendering pages; it does not affect browser rendering but influences server request patterns.

→Network Request

→Server Processing

⚠️ BottleneckServer Processing under heavy crawl load

Optimization Tips

1Use robots.txt to block crawling of heavy or sensitive paths.

2Avoid allowing all paths to reduce unnecessary server load.

3Test robots.txt regularly to ensure correct rules are served.

Performance Quiz - 3 Questions

What is the main performance benefit of properly configuring robots.txt?

A Decreasing CSS file size

B Reducing unnecessary server requests from bots

C Improving browser rendering speed

D Increasing JavaScript execution speed

DevTools: Network

How to check: Open DevTools > Network tab, filter by 'robots.txt' request, reload page to see if robots.txt is served correctly.

What to look for: Status 200 for robots.txt and correct content matching your intended rules.

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