How to Fix Body Exceeded 2MB Limit in Experience Editor and Sitecore with Next.js

Resolving the 2MB Body Limit Error in Sitecore Experience Editor With Next.js Configuration

A growing project will sometimes reach a point where a few of their pages might get too complicated or overwhelmed with data which might exceed the initial 2mb limit set by Sitecore. You might see an error like The remote server returned an error: (413) Body exceeded 2mb limit. which might prevent authors from accessing the Experience Editor and Sitecore Pages.

 

The good thing is this doesn’t affect the users who are accessing the page on the published site but it can create a hassle for our authors which we don’t want happening. Rather than spending a lot of time trying to root out components and optimizing each one without truly knowing if it can actually help cut down memory without risking it breaking the frontend, we have an easier way of handling it. We can simply configure the initial limit set which will help preventing the editors from breaking.

Updating the Body Parsing Setting

If you are a developer who likes to dig into their project’s code, you might have easily found where we can change this limit by doing a quick search. We know that the error shows a limit of 2mb so searching that might point you to the right files. There are two files you would want to update which are inside the rendering folder. In our project, which uses Next.js, you can find these under pages/api/editing which has render.ts and data/[key].ts files under it. You will see a piece of code in those files that will look like this.

export const config = {
  api: {
    bodyParser: {
      sizeLimit: '2mb',
    },
    responseLimit: false,
  },
};

You just simply need to update the sizeLimit to a higher size. If you want to be careful, you can simply experiment and slowly increase the limit instead of placing a high number in there. If it’s too high, actually investigating your code might be an important thing to do as well. Nothing complicated is to be done after, just push it up and do a deploy. You’ll soon be able to access your editors again, if it does come back up then you might have set the limit high enough.

Do We Need to Have This Configured?

There are a couple of reasons we might not be able to escape a situation where your page will exceed the initial limit being set on the boilerplate. This can be as simple as a requirement needed from a client which cannot simply be refused from, or requirements becoming overly complex and no simple solution can resolve it. Nevertheless, the page will still load on our frontend which is not a problem, but our editors may not be able to edit these pages on the different Sitecore editors which isn’t good. Hopefully this resolves the problem of your editors not running because of the size limit error.