title: How to Allocate More Memory to Javascript Heap Using Next.js
body: <p>We're having a problem with the development environment of our Next.js app.</p>
  <h2>Problem</h2>
  <p>Our Javascript heap is <strong>constantly</strong> running out of memory. Here are the specific error logs:</p>
  <pre><code>FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
   1: 0x10003ae75 node::Abort() [/usr/local/bin/node]
   2: 0x10003b07f node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
   3: 0x1001a7ae5 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
   4: 0x100572ef2 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
   5: 0x10057c3f4 v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/usr/local/bin/node]
   6: 0x10054e1e4 v8::internal::Factory::NewRawTwoByteString(int, v8::internal::PretenureFlag) [/usr/local/bin/node]
   7: 0x10067fd99 v8::internal::String::SlowFlatten(v8::internal::Handle&lt;v8::internal::ConsString&gt;, v8::internal::PretenureFlag) [/usr/local/bin/node]
   8: 0x1001c587d v8::String::Utf8Length() const [/usr/local/bin/node]
   9: 0x10004e7b6 node::Buffer::(anonymous namespace)::ByteLengthUtf8(v8::FunctionCallbackInfo&lt;v8::Value&gt; const&amp;) [/usr/local/bin/node]
  10: 0x2b9f4f0078a1 
  Abort trap: 6
  </code></pre>
  <p>Specifically: I've noticed questions that <a href="https://stackoverflow.com/questions/61402846/allocation-failed-javascript-heap-out-of-memory">are</a> <a href="https://stackoverflow.com/questions/38558989/node-js-heap-out-of-memory">somewhat</a> <a href="https://stackoverflow.com/questions/44046366/increase-javascript-heap-size-in-create-react-app-project">similar</a>, but when we try to run Node commands like this one: <code>node --max_old_space_size=4096 node_modules/.bin/react-scripts start</code> (a solution proposed elsewhere), which should allocate more memory to Node, we run into a problem. It seems that this will allocate extra memory to certain functions (and I've also seen this approach when allocating more memory to a specific file) but I'm not certain how to do that when you're running a command like <code>npm run dev</code> to start your development server.</p>
  <p>Got any ideas?</p>
  <h2>Core Parts of Our Tech Stack</h2>
  <ul>
  <li>&quot;@material-ui/core&quot;: &quot;^4.0.0-alpha.8&quot;,</li>
  <li>&quot;@stripe/react-stripe-js&quot;: &quot;^1.1.2&quot;,</li>
  <li>&quot;cors&quot;: &quot;^2.8.5&quot;,</li>
  <li>&quot;firebase&quot;: &quot;^7.14.4&quot;,</li>
  <li>&quot;next&quot;: &quot;^9.5.2&quot;,</li>
  <li>&quot;react&quot;: &quot;^16.8.6&quot;,</li>
  <li>&quot;react-query&quot;: &quot;^2.12.1&quot;,</li>
  </ul>