title: Static pages that are dynamically generated in Next JS
body: <p>Let's start with the relevant file structure</p>
  <pre><code>pages
    |---[state]
    |      |----[city].tsx
    |---[state].tsx
  </code></pre>
  <p>My goal is to both dynamically render pages at the location <code>/[state]</code> as well as at the location <code>/[state]/[city]</code></p>
  <p>When I run the build, <code>/[state]</code> is generated as expected but when it goes to build <code>[state]/city</code> it fails because <code>/[state]/</code> is now a dynamically assigned directory like <code>NorthCarolina/Charlotte</code> or <code>Florida/Orlando</code> and the error thrown is</p>
  <p><code>Error occured prerendering page &quot;/NorthCarolina/Charlotte&quot;... ENOTDIR: not a directory, open 'NorthCarolina/Charlotte'</code></p>
  <p>So while the errors seem kinda reasonable, I'm trying to figure out how I'm supposed to generate all these pages I want dynamically.</p>
  <p>I tried a hack solution like adding a folder called <code>NorthCarolina</code> to see if that'd fix it but no luck.</p>
  <hr />
  <hr />
  <p>Figured out that it has to do with how I'm writing to a file in <code>getStaticPaths</code> and reading from the written files in <code>getstaticProps</code>. Still messing around with it but the problem isn't related to a next.js feature.</p>