<h1 dir="auto">Feature request</h1>
<h2 dir="auto">Is your feature request related to a problem? Please describe.</h2>
<p dir="auto">I'd like to have multiple levels of nested layout.</p>
<p dir="auto">For example, the following directory structure:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="+ pages/
  - index.js
  + users
    - index.js
    + [id]
      - posts.js
      - orders.js
  - about.js"><pre class="notranslate"><code class="notranslate">+ pages/
  - index.js
  + users
    - index.js
    + [id]
      - posts.js
      - orders.js
  - about.js
</code></pre></div>
<p dir="auto">The home page,users page and about page have the same main layout, and ths user's posts and orders page have the same sub layout.</p>
<h2 dir="auto">Describe the solution you'd like</h2>
<p dir="auto">When there is _layout.js in the directory, a nested route will be generated, with _layout.js as the layout of the directory.</p>
<p dir="auto">For example, the following directory structure:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="+ pages/
  - _layout.js
  - index.js
  + users
    - index.js
    + [id]
      - _layout.js
      - posts.js
      - orders.js
  - about.js"><pre class="notranslate"><code class="notranslate">+ pages/
  - _layout.js
  - index.js
  + users
    - index.js
    + [id]
      - _layout.js
      - posts.js
      - orders.js
  - about.js
</code></pre></div>
<p dir="auto">The layout file returning a React component, and rendering the child components via props.children.It also has static function getInitialProps. The layout and page can load data at the same time when the page loads,</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="/* _layout.js */

const Layout = (props) =&gt; (
    &lt;&gt;
      &lt;Header /&gt;
      { props.children }
      &lt;Footer /&gt;
    &lt;/&gt;
);

Layout.getInitialProps = async (context) =&gt; {
  return {}
}

export default Layout"><pre class="notranslate"><code class="notranslate">/* _layout.js */

const Layout = (props) =&gt; (
    &lt;&gt;
      &lt;Header /&gt;
      { props.children }
      &lt;Footer /&gt;
    &lt;/&gt;
);

Layout.getInitialProps = async (context) =&gt; {
  return {}
}

export default Layout
</code></pre></div>
<h2 dir="auto">Describe alternatives you've considered</h2>
<p dir="auto">A clear and concise description of any alternative solutions or features you've considered.</p>
<h2 dir="auto">Additional context</h2>
<p dir="auto">Add any other context or screenshots about the feature request here.</p>
<p dir="auto">On Safari the page loads and subsequent transition gives fails giving an error in dev console "No router instance found. You should only use "next/router" inside the client side of your app."</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/237741/27828723-feed00e8-60bd-11e7-9d1c-3ac815b16bd5.png"><img src="https://user-images.githubusercontent.com/237741/27828723-feed00e8-60bd-11e7-9d1c-3ac815b16bd5.png" alt="screen shot 2017-07-04 at 1 34 49 pm" style="max-width: 100%;"></a></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">Page transition</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">Failure to transition page</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>Load page</li>
<li>Click link</li>
</ol>
<h2 dir="auto">Context</h2>


<h2 dir="auto">Your Environment</h2>

<ul dir="auto">
<li>Next.js version: next.js v2.4.6</li>
<li>Environment name and version (e.g. Chrome 39, Node.js 5.4): Safari / Node 7.2</li>
<li>Operating System (Linux, maxOS, Windows): OSX</li>
</ul>