<p dir="auto">I have overwritten next to use <code class="notranslate">src</code> for the content of my application and am using <code class="notranslate">express</code> to serve my application.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=".
├── node_modules
├── package.json
├── server.js
├── src
│   ├── components
│   ├── next.config.js
│   ├── pages
│   ├── static (dynamic from webpack)
│   └── styles
└── yarn.lock"><pre class="notranslate"><code class="notranslate">.
├── node_modules
├── package.json
├── server.js
├── src
│   ├── components
│   ├── next.config.js
│   ├── pages
│   ├── static (dynamic from webpack)
│   └── styles
└── yarn.lock
</code></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// next.config.js
const path = require('path');

const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
	webpack: (config) =&gt; {
		config.plugins.push(new ExtractTextPlugin({ // bundle all CSS for static export
			filename  : 'static/styles/bundle.css', //&lt;--- PROBLEM LINE
			allChunks : true,
		}));

		config.module.rules.push(
			{
				test    : /(\.scss|\.css)$/,
				loader  : 'emit-file-loader',
				options : {
					name: './dist/[path][name].[ext]',
				},
			},
			{
				test   : /(\.scss|\.css)$/,
				loader : ExtractTextPlugin.extract({
					fallback : 'style-loader',
					use      : [
						{
							loader  : 'css-loader',
							options : {
								modules        : true,
								sourceMap      : true,
								importLoaders  : 1,
								localIdentName : '[name]__[local]___[hash:base64:5]',
							},
						},
						{
							loader  : 'postcss-loader',
							options : {
								plugins: [autoprefixer],
							},
						},
						{
							loader  : 'sass-loader',
							options : {
								includePaths: [path.resolve(__dirname, './')], //eslint-disable-line
							},
						},
					],
				}),
			});

		return config;
	},
};"><pre class="notranslate"><span class="pl-c">// next.config.js</span>
<span class="pl-k">const</span> <span class="pl-s1">path</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'path'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">autoprefixer</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'autoprefixer'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">ExtractTextPlugin</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'extract-text-webpack-plugin'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
	<span class="pl-en">webpack</span>: <span class="pl-kos">(</span><span class="pl-s1">config</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
		<span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">plugins</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span><span class="pl-k">new</span> <span class="pl-v">ExtractTextPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c">// bundle all CSS for static export</span>
			<span class="pl-c1">filename</span>  : <span class="pl-s">'static/styles/bundle.css'</span><span class="pl-kos">,</span> <span class="pl-c">//&lt;--- PROBLEM LINE</span>
			<span class="pl-c1">allChunks</span> : <span class="pl-c1">true</span><span class="pl-kos">,</span>
		<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

		<span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">module</span><span class="pl-kos">.</span><span class="pl-c1">rules</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span>
			<span class="pl-kos">{</span>
				<span class="pl-c1">test</span>    : <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-kos">(</span><span class="pl-cce">\.</span>scss<span class="pl-c1">|</span><span class="pl-cce">\.</span>css<span class="pl-kos">)</span><span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
				<span class="pl-c1">loader</span>  : <span class="pl-s">'emit-file-loader'</span><span class="pl-kos">,</span>
				<span class="pl-c1">options</span> : <span class="pl-kos">{</span>
					<span class="pl-c1">name</span>: <span class="pl-s">'./dist/[path][name].[ext]'</span><span class="pl-kos">,</span>
				<span class="pl-kos">}</span><span class="pl-kos">,</span>
			<span class="pl-kos">}</span><span class="pl-kos">,</span>
			<span class="pl-kos">{</span>
				<span class="pl-c1">test</span>   : <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-kos">(</span><span class="pl-cce">\.</span>scss<span class="pl-c1">|</span><span class="pl-cce">\.</span>css<span class="pl-kos">)</span><span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
				<span class="pl-c1">loader</span> : <span class="pl-v">ExtractTextPlugin</span><span class="pl-kos">.</span><span class="pl-en">extract</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
					<span class="pl-c1">fallback</span> : <span class="pl-s">'style-loader'</span><span class="pl-kos">,</span>
					<span class="pl-c1">use</span>      : <span class="pl-kos">[</span>
						<span class="pl-kos">{</span>
							<span class="pl-c1">loader</span>  : <span class="pl-s">'css-loader'</span><span class="pl-kos">,</span>
							<span class="pl-c1">options</span> : <span class="pl-kos">{</span>
								<span class="pl-c1">modules</span>        : <span class="pl-c1">true</span><span class="pl-kos">,</span>
								<span class="pl-c1">sourceMap</span>      : <span class="pl-c1">true</span><span class="pl-kos">,</span>
								<span class="pl-c1">importLoaders</span>  : <span class="pl-c1">1</span><span class="pl-kos">,</span>
								<span class="pl-c1">localIdentName</span> : <span class="pl-s">'[name]__[local]___[hash:base64:5]'</span><span class="pl-kos">,</span>
							<span class="pl-kos">}</span><span class="pl-kos">,</span>
						<span class="pl-kos">}</span><span class="pl-kos">,</span>
						<span class="pl-kos">{</span>
							<span class="pl-c1">loader</span>  : <span class="pl-s">'postcss-loader'</span><span class="pl-kos">,</span>
							<span class="pl-c1">options</span> : <span class="pl-kos">{</span>
								<span class="pl-c1">plugins</span>: <span class="pl-kos">[</span><span class="pl-s1">autoprefixer</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
							<span class="pl-kos">}</span><span class="pl-kos">,</span>
						<span class="pl-kos">}</span><span class="pl-kos">,</span>
						<span class="pl-kos">{</span>
							<span class="pl-c1">loader</span>  : <span class="pl-s">'sass-loader'</span><span class="pl-kos">,</span>
							<span class="pl-c1">options</span> : <span class="pl-kos">{</span>
								<span class="pl-c1">includePaths</span>: <span class="pl-kos">[</span><span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'./'</span><span class="pl-kos">)</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-c">//eslint-disable-line</span>
							<span class="pl-kos">}</span><span class="pl-kos">,</span>
						<span class="pl-kos">}</span><span class="pl-kos">,</span>
					<span class="pl-kos">]</span><span class="pl-kos">,</span>
				<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
			<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

		<span class="pl-k">return</span> <span class="pl-s1">config</span><span class="pl-kos">;</span>
	<span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// server.js
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const dir = './src';

const app = next({ dev, dir });"><pre class="notranslate"><span class="pl-c">// server.js</span>
<span class="pl-k">const</span> <span class="pl-s1">next</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'next'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">dev</span> <span class="pl-c1">=</span> <span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">NODE_ENV</span> <span class="pl-c1">!==</span> <span class="pl-s">'production'</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">dir</span> <span class="pl-c1">=</span> <span class="pl-s">'./src'</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">app</span> <span class="pl-c1">=</span> <span class="pl-s1">next</span><span class="pl-kos">(</span><span class="pl-kos">{</span> dev<span class="pl-kos">,</span> dir <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h2 dir="auto">What happens:</h2>
<h4 dir="auto">Running <code class="notranslate">yarn dev</code> === <code class="notranslate">NODE_ENV=dev node server.js</code></h4>
<ul dir="auto">
<li><code class="notranslate">./src/static/styles/bundle.css</code> is created and refreshed on file changes</li>
<li><code class="notranslate">next</code> properly references the <code class="notranslate">/static</code> directory in the <code class="notranslate">head</code> so my styles appear</li>
</ul>
<h4 dir="auto">Runing <code class="notranslate">yarn build</code> === <code class="notranslate">next build src</code> &amp;&amp; <code class="notranslate">yarn start</code> === <code class="notranslate">NODE_ENV=production node server.js</code></h4>
<ul dir="auto">
<li>pages / components / JS is bundled into <code class="notranslate">./src/.next</code></li>
<li><code class="notranslate">server.js</code> correctly loads JS resources from <code class="notranslate">.next</code> directory.</li>
<li><code class="notranslate">./src/.next/static</code> is created with the <code class="notranslate">bundle.css</code></li>
<li>**<code class="notranslate">head</code> is trying to resolve <code class="notranslate">/static</code> to <code class="notranslate">./src/static</code> instead of <code class="notranslate">./next/static</code></li>
</ul>
<h2 dir="auto">What I've tried</h2>
<p dir="auto">I've tried everything under the sun for <code class="notranslate">filename</code> in <code class="notranslate">next.config.js</code> and I cannot seem to get it to drop the <code class="notranslate">static</code> directory into <code class="notranslate">./src</code> when running <code class="notranslate">yarn build</code>.  It either is nowhere (presumably in relative path in the build process, deep in my file system) or is in <code class="notranslate">.next</code> which is not referenced in <code class="notranslate">&lt;head&gt;</code></p>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">I think that <code class="notranslate">static</code> should get compiled to <code class="notranslate">.next</code> and used there.  It would be a much cleaner solution.  However, I get that sometimes <code class="notranslate">static</code> will be very large, (due to images and the like) so that might not be the best solution.  Therefore, any help getting <code class="notranslate">static</code> to populate when using a <code class="notranslate">src</code> override  with <code class="notranslate">build</code> would be amazing.</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">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>See Above</li>
</ol>
<h2 dir="auto">Outcome</h2>
<p dir="auto">If I'm able to get this fixed, I can update the <code class="notranslate">external-css</code> example (or make a new <code class="notranslate">css-module</code> example that will help the community have a non-js-in-css option that is modern and scalable.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>4.14</td>
</tr>
<tr>
<td>node</td>
<td>8</td>
</tr>
<tr>
<td>OS</td>
<td>osx</td>
</tr>
<tr>
<td>browser</td>
<td>chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> 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"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/22074518/32769028-3858d564-c955-11e7-9b06-8318d5e51da3.png"><img src="https://user-images.githubusercontent.com/22074518/32769028-3858d564-c955-11e7-9b06-8318d5e51da3.png" alt="screen shot 2017-11-14 at 4 00 18 pm" style="max-width: 100%;"></a><br>
Scrollview and left sidebar is in different container and when changing component's state should not affect others.</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">Scrollview will always get affected when any component changing state.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>go to <a href="https://wander.chat/" rel="nofollow">https://wander.chat/</a> with safari.</li>
<li>scroll to the bottom.</li>
<li>click on the left top corner logo and scroll view will suddenly jump to the top</li>
</ol>
<h2 dir="auto">Context</h2>


<p dir="auto">I just want to make how it is working in google chrome and i had try to log which container/component is re-render but nothing is being re-render while scrollview keep on scrolling to the top.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>3.2.2</td>
</tr>
<tr>
<td>node</td>
<td>8.2.1</td>
</tr>
<tr>
<td>OS</td>
<td>macOs High Sierra v 10.13.1</td>
</tr>
<tr>
<td>browser</td>
<td>Safari v 11.0.1</td>
</tr>
</tbody>
</table>