I have a sidebar component that I want to display on different pages in my Next js project. Of course I could just add it to every page separately, say for example I want my sidebar on page1 and page2 I add them to page1.js and page2.js in my pages folder. But when I navigate from page1 to page2 my sidebar component will reload and my useStates will be lost.

Ideally, I want to have some sort of template, say _page_with_sidebar.js where I can add my sidebar component and some sort of main component into which specific pages are rendered. This would be similar to the custom document which Next js provides, but with scoping it to specific pages only.

Is this possible in Next js or is there even a better solution for this problem?