Robots.txt configuration in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the effect of this robots.txt configuration in Next.js?

Given this robots.txt content served in a Next.js app, what will search engines be allowed to crawl?

NextJS

User-agent: *
Disallow: /admin
Allow: /admin/public
Sitemap: https://example.com/sitemap.xml

A Search engines can crawl all pages except those under /admin except /admin/public which is allowed.

B Search engines cannot crawl any pages under /admin including /admin/public.

C Search engines can crawl all pages including /admin and /admin/public.

D Search engines are blocked from crawling the entire site.

💡 Hint

Remember that 'Allow' can override 'Disallow' for specific paths.

The Disallow: /admin blocks crawling of the /admin directory, but Allow: /admin/public explicitly permits crawling of the /admin/public subdirectory. The User-agent: * applies this rule to all search engines.

📝 Syntax

intermediate

Which robots.txt snippet is syntactically correct for Next.js static export?

Choose the valid robots.txt content that Next.js can serve without syntax errors.

A

User-agent: *
Disallow: /private
Allow: /public
Sitemap https://example.com/sitemap.xml
Extra: value

B

User-agent *
Disallow /private
Allow /public
Sitemap https://example.com/sitemap.xml

C

User-agent: *
Disallow: /private
Allow: /public
Sitemap: https://example.com/sitemap.xml

D

User-agent: *
Disallow: /private
Allow: /public
Sitemap: https://example.com/sitemap.xml
User-agent: /bot

💡 Hint

Check for correct use of colons and standard directives.

Option C uses correct syntax with colons and standard directives. Option C misses colons, Option C has an invalid 'Extra' directive, and Option C has an invalid 'User-agent' value.

🔧 Debug

advanced

Why does this Next.js robots.txt not block /secret as intended?

This robots.txt is served but /secret is still indexed by search engines. What is the issue?

NextJS

User-agent: *
Disallow: secret

A The 'User-agent' directive is incorrect and should be 'User-agent: *'.

B The path 'secret' is missing a leading slash, so it doesn't match '/secret'.

C The 'Disallow' directive should be 'Disallow: /secret/*' to block all subpaths.

D The robots.txt file must be named 'robotsjs.txt' in Next.js.

💡 Hint

Paths in robots.txt must start with a slash to match URLs correctly.

Robots.txt paths must start with a slash. Without it, 'secret' does not match '/secret' URLs, so crawling is not blocked.

🧠 Conceptual

advanced

What is the purpose of including a Sitemap directive in robots.txt in Next.js?

Why should you add a Sitemap URL in your robots.txt file when deploying a Next.js site?

A It helps search engines find and index all pages efficiently by pointing to the sitemap location.

B It blocks search engines from crawling the sitemap file itself.

C It automatically generates the sitemap for the Next.js site.

D It prevents duplicate content issues by redirecting crawlers.

💡 Hint

Think about how search engines discover pages on your site.

The Sitemap directive tells search engines where to find the sitemap XML file, which lists all important URLs. This improves crawling efficiency and indexing.

❓ state_output

expert

What is the output behavior when Next.js serves this robots.txt file dynamically?

Consider a Next.js API route serving robots.txt with this code snippet: ```js export default function handler(req, res) { res.setHeader('Content-Type', 'text/plain'); res.write('User-agent: *\nDisallow: /private'); res.end(); } ``` What will a search engine see when requesting /robots.txt?

NextJS

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

A The search engine receives an HTML page instead of robots.txt content.

B The robots.txt content is served but with incorrect Content-Type causing it to be ignored.

C The server returns a 404 Not Found error for /robots.txt.

D The search engine receives a valid robots.txt blocking /private directory.

💡 Hint

Check the Content-Type header and response body.

The handler sets the Content-Type to 'text/plain' and writes valid robots.txt content, so search engines will correctly interpret it and block /private.

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