<p dir="auto">We need ability to pass custom config information at runtime to the browser, in the same fashion next.js passes <code class="notranslate">assetPrefix</code> from <code class="notranslate">next.config.js</code>.</p>


<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Ability to add custom information (like graphql endpoint) to <code class="notranslate">next.config.js</code>, something like:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="module.exports = {
  assetPrefix: process.env.CDN_PREFIX,
  config: {
    graphql: {
      uri: process.env.GRAPHQL_ENDPOINT
    },
    myCustomThing: '2345678',
    myCustomList: [ 'a', 'b', 'c' ]
  }
};"><pre class="notranslate"><code class="notranslate">module.exports = {
  assetPrefix: process.env.CDN_PREFIX,
  config: {
    graphql: {
      uri: process.env.GRAPHQL_ENDPOINT
    },
    myCustomThing: '2345678',
    myCustomList: [ 'a', 'b', 'c' ]
  }
};
</code></pre></div>
<p dir="auto">and a way to consume it in the app running in the browser, like:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const { config } = __NEXT_DATA__"><pre class="notranslate"><code class="notranslate">const { config } = __NEXT_DATA__
</code></pre></div>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Nothing happens</p>
<h2 dir="auto">Context</h2>
<p dir="auto">We're building immutable images that later deployed to the different environments, so there is no way for us to mutate the code and bake in API endpoints, we need this feature to provide API endpoints via environment variables at runtime.</p>
<p dir="auto">Thank you.</p>
<h1 dir="auto">Feature request</h1>
<h2 dir="auto">Is your feature request related to a problem? Please describe.</h2>
<p dir="auto">Currently, the logic to move things into the commons chunk is based on the count of pages (ie. files in the <code class="notranslate">pages/</code> directory). I think this approach doesn't scale very well and is too simplistic.</p>
<ul dir="auto">
<li>If we have a larger app with different sets of pages that have shared dependencies, they won't be moved to up to shared chunks. For example, when 30% of pages depend on module "a".</li>
<li>Even if we "cheat" by importing things into more pages, they will only get moved to the single commons chunk where they're unnecessary by all other pages (in our example, "a" will end up in commons but is not needed on 70% of pages)</li>
<li>If I interpret the generated bundles correctly, there are no shared chunks created for anything that isn't a page.</li>
</ul>
<h2 dir="auto">Describe the solution you'd like</h2>
<ul dir="auto">
<li>Ideally, the 30% of pages which depend on module "a" should have a shared chunk containing "a". This chunk would not be loaded/used by the other 70% of pages</li>
<li>Non-page modules should also be able to have shared chunks</li>
</ul>
<p dir="auto">In short: chunk splitting should be more granular. I believe with the move to webpack 4 in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="334059908" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/4639" data-hovercard-type="pull_request" data-hovercard-url="/vercel/next.js/pull/4639/hovercard" href="https://github.com/vercel/next.js/pull/4639">#4639</a> this shouldn't be too hard, as it would generally mean giving more control over the chunking back to webpack.</p>
<p dir="auto">I haven't analyzed the situation with the current canary branch, so my observations are still based on the current stable webpack 3 based approach. However, the same logic is in place at the moment:</p>
<p dir="auto"><a href="https://github.com/zeit/next.js/blob/f4988e7fa3152920125498778dbcb9656be24072/build/webpack.js#L86-L94">https://github.com/zeit/next.js/blob/f4988e7fa3152920125498778dbcb9656be24072/build/webpack.js#L86-L94</a></p>
<p dir="auto">If this sounds interesting <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/timneutkens/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/timneutkens">@timneutkens</a>, I'd be happy to spend some time on this by trying out a solution.</p>
<h2 dir="auto">Additional context</h2>
<p dir="auto"><a href="https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366" rel="nofollow">https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366</a></p>