<p dir="auto">my directory structure has the pages folder inside a src root and the static folder is on the same  level as the src folder,how do i configure webpack so as i can be able to access the files inside the assets folder from the src/pages/index.js</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?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>



<h2 dir="auto">Current Behavior</h2>


<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<p dir="auto">1.create src folder<br>
2.move pages into src<br>
3.try accessing static/xyz.png from src/pages/index.js</p>
<h2 dir="auto">Context</h2>
<p dir="auto">directory structuring tryin to move all dynamic code into src</p>



<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td></td>
</tr>
<tr>
<td>node</td>
<td></td>
</tr>
<tr>
<td>OS</td>
<td></td>
</tr>
<tr>
<td>browser</td>
<td></td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<p dir="auto">I am trying to use nextjs with express by loading the nextjs app as an express router. I am mostly following the express example in the example folder but when the server starts up, I can only access the index page. All the other pages aren't loaded into the build folder. Not sure why that's happening as everything works perfectly if I load the next app directly rather than loading it as an express router.</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 &amp; Current Behavior</h2>
<p dir="auto">I expected all the pages to load normally but that's not happening as only the index page loads</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">The project can be access <a href="https://github.com/walleXD/nextpack-simple/tree/refactor/next_express-router">here</a>. It's very similar to the express example in the nextjs repo other than splitting out the rendering into an express router file, which is what I am trying to accomplish</p>
<p dir="auto"><em>index.js</em>(main project entry)</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import express from 'express'
import next from 'next'

import { apiRouter, nextRouter, app } from './server/router'

const start = async () =&gt; {
  const server = express()
  await app.prepare()

  server.use('/api', apiRouter)

  server.use('*', nextRouter)

  server.listen(3000, (err) =&gt; {
    if (err) throw err
    console.log('&gt; Ready on http://localhost:3000')
  })
}

start()"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-s1">express</span> <span class="pl-k">from</span> <span class="pl-s">'express'</span>
<span class="pl-k">import</span> <span class="pl-s1">next</span> <span class="pl-k">from</span> <span class="pl-s">'next'</span>

<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">apiRouter</span><span class="pl-kos">,</span> <span class="pl-s1">nextRouter</span><span class="pl-kos">,</span> <span class="pl-s1">app</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./server/router'</span>

<span class="pl-k">const</span> <span class="pl-en">start</span> <span class="pl-c1">=</span> <span class="pl-k">async</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-s1">server</span> <span class="pl-c1">=</span> <span class="pl-en">express</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
  <span class="pl-k">await</span> <span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-en">prepare</span><span class="pl-kos">(</span><span class="pl-kos">)</span>

  <span class="pl-s1">server</span><span class="pl-kos">.</span><span class="pl-en">use</span><span class="pl-kos">(</span><span class="pl-s">'/api'</span><span class="pl-kos">,</span> <span class="pl-s1">apiRouter</span><span class="pl-kos">)</span>

  <span class="pl-s1">server</span><span class="pl-kos">.</span><span class="pl-en">use</span><span class="pl-kos">(</span><span class="pl-s">'*'</span><span class="pl-kos">,</span> <span class="pl-s1">nextRouter</span><span class="pl-kos">)</span>

  <span class="pl-s1">server</span><span class="pl-kos">.</span><span class="pl-en">listen</span><span class="pl-kos">(</span><span class="pl-c1">3000</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">err</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">err</span><span class="pl-kos">)</span> <span class="pl-k">throw</span> <span class="pl-s1">err</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'&gt; Ready on http://localhost:3000'</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span>

<span class="pl-en">start</span><span class="pl-kos">(</span><span class="pl-kos">)</span></pre></div>
<p dir="auto"><em>nextRouter.js</em></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import express from 'express'
import next from 'next'

import conf from '../../client/next.config'

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev, dir: './client', conf})
const handle = app.getRequestHandler()
const nextRouter = express.Router()

nextRouter.get('*', (req, res) =&gt; {
  return handle(req, res)
})

export {
  app,
  nextRouter
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-s1">express</span> <span class="pl-k">from</span> <span class="pl-s">'express'</span>
<span class="pl-k">import</span> <span class="pl-s1">next</span> <span class="pl-k">from</span> <span class="pl-s">'next'</span>

<span class="pl-k">import</span> <span class="pl-s1">conf</span> <span class="pl-k">from</span> <span class="pl-s">'../../client/next.config'</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-k">const</span> <span class="pl-s1">app</span> <span class="pl-c1">=</span> <span class="pl-en">next</span><span class="pl-kos">(</span><span class="pl-kos">{</span> dev<span class="pl-kos">,</span> <span class="pl-c1">dir</span>: <span class="pl-s">'./client'</span><span class="pl-kos">,</span> conf<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">const</span> <span class="pl-s1">handle</span> <span class="pl-c1">=</span> <span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-en">getRequestHandler</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
<span class="pl-k">const</span> <span class="pl-s1">nextRouter</span> <span class="pl-c1">=</span> <span class="pl-s1">express</span><span class="pl-kos">.</span><span class="pl-en">Router</span><span class="pl-kos">(</span><span class="pl-kos">)</span>

<span class="pl-s1">nextRouter</span><span class="pl-kos">.</span><span class="pl-en">get</span><span class="pl-kos">(</span><span class="pl-s">'*'</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">,</span> <span class="pl-s1">res</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-s1">handle</span><span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">,</span> <span class="pl-s1">res</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>

<span class="pl-k">export</span> <span class="pl-kos">{</span>
  <span class="pl-s1">app</span><span class="pl-kos">,</span>
  <span class="pl-s1">nextRouter</span>
<span class="pl-kos">}</span></pre></div>
<h2 dir="auto">Context</h2>
<p dir="auto">I am trying to use nextjs with backpackjs and I have been mostly successful. I am trying to separate out the nextjs app rendering into a separate express router file as that would allow me to better define route rendering on the server side</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>latest</td>
</tr>
<tr>
<td>node</td>
<td>8.2.1</td>
</tr>
<tr>
<td>OS</td>
<td>macOS 10.12.5</td>
</tr>
<tr>
<td>browser</td>
<td>chrome</td>
</tr>
</tbody>
</table>