Step-by-Step Guide: How to Create Robots.txt File for Next.js Websites

In the modern web development landscape, managing how search engine crawlers interact with your website is crucial. The robots.txt file plays a significant role in this process. It's a web standard file that resides in the root directory of your site, guiding search engine crawlers on which pages to index and which to ignore. For a Next.js application, setting up this file correctly is vital for optimal SEO performance.

What is a Robots.txt File?

The robots.txt file is a simple text file that contains rules about the URLs that search engines can or cannot access on your website. It tells search engine crawlers which pages or directories they are allowed to visit. This is particularly useful for preventing indexing of specific parts of your site that might contain duplicate content, sensitive information, or are irrelevant to search engines.

1User-agent: *
2Disallow: /api/
3Disallow: /private/
4Allow: /public/
5Sitemap: https://yourwebsite.com/sitemap.xml

​

In this example, all user agents are disallowed from accessing the /api/ and /private/ directories but are allowed to access the /public/ directory. Additionally, a sitemap URL is provided to help search engines find all the pages you want to be indexed.

Creating Robots.txt in Next.js

In a Next.js project, the robots.txt file should be placed in the public directory. This ensures that it is served from the root directory of your site.

Steps to Create a Robots.txt File

1. Navigate to the Public Directory: The public directory is the place where all your static files like images, fonts, and documents reside. To create a robots.txt file, navigate to this directory.

2. Create the Robots.txt File: Create a new file named robots.txt in the public directory.

3. Add Rules to the File: Define the rules for the user agents in the robots.txt file. For example:

1User-agent: *
2Disallow: /private/
3Sitemap: https://yourwebsite.com/sitemap.xml

​

Advanced Configuration with Next.js

For more advanced use cases, you might need to generate the robots.txt file dynamically. This can be achieved using server side rendering in Next.js.

Using Next Sitemap

The next-sitemap package is a useful tool for generating sitemap and robots.txt files dynamically based on your site’s structure.

Installing Next Sitemap

To install next-sitemap, run:

1npm install next-sitemap

​

Configuring Next Sitemap

Create a next-sitemap.config.js file in the root of your project:

1const config = {
2  siteUrl: 'https://yourwebsite.com',
3  generateRobotsTxt: true,
4  robotsTxtOptions: {
5    policies: [
6      { userAgent: '*', disallow: '/private/' },
7      { userAgent: '*', allow: '/' },
8    ],
9  },
10};
11
12module.exports = config;

​

Then, update your package.json to include a new script:

1"scripts": {
2  "sitemap": "next-sitemap"
3}

​

Run the script to generate the robots.txt and sitemap.xml files:

1npm run sitemap

​

Managing Access with Robots.txt

Common Use Cases

• Blocking Sensitive Data: If you have sensitive data or non-public information, use the robots.txt file to prevent search engines from indexing those directories or files.

1User-agent: *
2Disallow: /sensitive-data/

​

• Preventing Duplicate Content: To avoid duplicate content issues, you might want to block search engines from indexing certain parts of your site.

1User-agent: *
2Disallow: /duplicate-content/

​

Monitoring and Testing

It's essential to test your robots.txt file to ensure it's working as intended. Google Search Console provides tools to test your robots.txt and see how search engine crawlers interpret it.

Conclusion

Properly configuring your robots.txt file in a Next.js project is vital for controlling how search engine crawlers interact with your site. By strategically allowing or disallowing access to specific parts of your site, you can optimize your SEO and protect sensitive information. Tools like next-sitemap make this process more manageable and help automate the generation of both sitemap and robots.txt files.

By understanding and implementing the concepts discussed, you can ensure your Next.js site is well-prepared for search engines while maintaining control over which pages are indexed.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.