title: How should I structure the layout of my simple notes app in NextJS?
body: <p>(Please read everything before answering, there are lots of puzzling pieces.)</p>
  <p>I am trying to create a simple notes application in NextJS, according to the given layout :</p>
  <p><a href="https://i.stack.imgur.com/h0JNZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h0JNZ.png" alt="enter image description here" /></a></p>
  <p>Details :</p>
  <ol>
  <li>There is one Header with just a logo and is consistent on every page.</li>
  <li>The left side renders all the cards I have with the title. In the left section itself, the &quot;New Note&quot; button would dynamically navigate to a new page such as <code>localhost:3000/newnote/5</code> with an empty page in the right section.</li>
  <li>The right section has details of any specific card when clicked, such as its title and the description, and we can click on save the note, that card would get added to the list of cards on the left section, and similarly when that specific card is clicked, renders the details on the right-side area.</li>
  </ol>
  <p>(<em>I am dynamically creating the new note button link by calculating the number of cards I have if the card is 4, then on the click of the <code>new note</code> button, it would go to <code>localhost:3000/newnote/5</code></em>)</p>
  <p>The problem in NextJS:</p>
  <p>Since there is a file in NextJS called &quot;_app.js&quot; and whatever we put in that file will remain consistent throughout the application. Hence I have placed my <code>&lt;Header /&gt;</code> component there.
  But since the layout structure doesn't change through the page containing the left and right side of the section, should I also place it in the <code>_app.js</code> itself?</p>
  <p>If yes, then how do I create the homepage on the <code>index.js</code> file?</p>
  <p>useState issue :</p>
  <p>How Do I pass data between the section, i.e fetch data from the right section to the left?</p>
  <p>What I have tried :</p>
  <pre><code>const [data, setData] = useState()
  &lt;Layout&gt;
   &lt;LeftSide /&gt;
   &lt;RightSide /&gt;
  &lt;/Layout&gt;
  
  </code></pre>
  <p>Please notice how I am passing data to both sections, i.e using a parent layout component, is it an ideal way to go or am I using the useState way too far from the components? If yes, then where should I place the Layout component, <code>_app.js</code> or <code>index.js</code>?</p>
  <p>Thank you for reading, any little help will do.
  I can further clarify if anything is needed.</p>