Robots.txt configuration in NextJS - Step-by-Step Execution

Concept Flow - Robots.txt configuration

Start

↓

Create robots.txt file

↓

Add rules: User-agent, Allow/Disallow

↓

Place file in public folder

↓

Build and deploy Next.js app

↓

Search engines request /robots.txt

↓

Serve robots.txt content

↓

Search engines follow rules

↓

End

The flow shows creating a robots.txt file with rules, placing it in the public folder, deploying the app, and search engines reading and following the rules.

Execution Sample

NextJS

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

# Place this file in /public folder

This robots.txt file blocks all search engines from /admin but allows crawling other pages.

Execution Table

Step	Action	File Location	Content Added	Effect
1	Create robots.txt file	/public	User-agent: *	Targets all search engines
2	Add Disallow rule	/public	Disallow: /admin	Blocks /admin from crawling
3	Add Allow rule	/public	Allow: /	Allows crawling all other pages
4	Deploy Next.js app	N/A	robots.txt served at /robots.txt	File accessible to crawlers
5	Search engine requests /robots.txt	N/A	robots.txt content served	Crawler reads rules
6	Crawler follows rules	N/A	Blocks /admin, allows others	Site indexed accordingly
7	End	N/A	N/A	Process complete

💡 robots.txt served and crawlers follow rules, stopping at step 6

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5	Final
robots.txt content	empty	User-agent: *	User-agent: * Disallow: /admin	User-agent: * Disallow: /admin Allow: /	File placed in /public	File served at /robots.txt	Rules read and applied by crawler

Key Moments - 3 Insights

Why must robots.txt be placed in the /public folder in Next.js?

Because Next.js serves static files from the /public folder at the root URL, placing robots.txt there makes it accessible at /robots.txt for crawlers, as shown in execution_table step 4.

What happens if you forget to add 'User-agent: *' in robots.txt?

Without 'User-agent: *', the rules may not apply to all crawlers. The execution_table step 1 shows this line targets all search engines, so missing it means rules might be ignored.

Can you block only one page or folder using robots.txt?

Yes, by adding 'Disallow: /folder' or 'Disallow: /page', like in step 2 where /admin is blocked, while others remain allowed.

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what rule is added to allow crawling?

A User-agent: *

B Disallow: /admin

C Allow: /

D Disallow: /

💡 Hint

Check the 'Content Added' column at step 3 in execution_table

At which step does the robots.txt file become accessible to search engines?

A Step 4

B Step 2

C Step 5

D Step 6

💡 Hint

Look for when the file is served at /robots.txt in execution_table

If you remove 'Disallow: /admin', what changes in the crawler behavior?

A Crawler blocks /admin

B Crawler allows /admin

C Crawler blocks all pages

D Crawler ignores robots.txt

💡 Hint

Refer to variable_tracker and execution_table step 2 and 6 about disallow rules

Concept Snapshot

robots.txt is a text file placed in the /public folder in Next.js.
It tells search engines which pages or folders to allow or block.
Syntax uses 'User-agent', 'Disallow', and 'Allow' lines.
Search engines read /robots.txt at site root and follow rules.
Always test your robots.txt by accessing /robots.txt URL.
Blocking sensitive pages improves site privacy and SEO control.

Full Transcript

Robots.txt configuration in Next.js involves creating a plain text file named robots.txt with rules for search engines. The file must be placed in the /public folder so it is served at the root URL /robots.txt. The file contains lines like 'User-agent: *' to target all crawlers, 'Disallow: /admin' to block crawling of the /admin folder, and 'Allow: /' to permit crawling of other pages. When the Next.js app is deployed, search engines request /robots.txt and read these rules to decide which pages to index. This process helps control what parts of the site appear in search results. Beginners often wonder why the file must be in /public and what happens if rules are missing. The execution table shows step-by-step how the file is created, deployed, served, and used by crawlers. The variable tracker shows how the content of robots.txt builds up over steps. Quizzes test understanding of when rules are added, when the file is accessible, and effects of removing rules. The snapshot summarizes key points for quick reference.

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