Next.js: Question: Single Page Application

[kaym0]

I'm relatively new to using next.js [and React] and I had a question I thought would be best asked here. Is it possible to build a single page application with next.js? I can't seem to figure out how to have a static navbar/menu that won't reload when routing. Do I need to implement custom routing to make this possible? Are there any examples of someone who has already done this? I tried next-layouts and I really don't think it did anything I could not have done without it. Maybe I didn't use it right, though.

Thanks. Also, I have read the examples and previous issues regarding Semantic-UI and was wondering if anyone has figured out how to locally load it without using a stylesheet CDN. Even with the loaders setup properly and no errors showing, it clearly does not load and my page just looks pretty vanilla. :P

[guiihlopes]

Yes, it's possible to build a SPA with next.js, you need to use Link component as mentioned here: Link or use this example to do it programmatically: Link with Router

About Semantic UI, you can use this example: Semantic UI without CDN

Hope it helps ;)

[timneutkens]

For the layout that doesn't reload see #88 (will come soon).

If by SPA you mean running next without a node server, that's currently only possible using next export which produces static html for pages.

next/link does client side routing.

[kaym0]

No I just meant a Single Page Application which runs server side, with the basic layout (like the navigation) not reloading, only the content. I previously was using Vue before switching to React and was building SPA on that.

Basically, you would build a layout was inside of app.js and then any of the content would load inside of that in the content area. Mostly I just like it for the navigation bar so that it doesn't have to reload every time you switch pages. It just looks more fluid. This, I think, required Vue-Router.

Thanks for the replies guys. Looking forward to getting to know more about Next.js

[timneutkens]

For the layout that doesn't reload see #88 (will come soon).

[kaym0]

Yes, I'm checking that out just wanted to clarify that I did not want to run a static html page without a server.

[kaym0]

So to clarify: this will not be available until Next 6.x?

[timneutkens]

Indeed 🔜

[hi-rad]

@timneutkens I am working with Next 6.0.2 and it still reloads the layout. I want to user redux to fetch the menu however the layout is being re-rendered every time and getInitialProps of _app.js is also being called on every request. Shouldn't getInitialProps of _app.js be called once? (And also the re-rendering of the layout is an issue, isn't it?)

[AleVul]

I have the same problem, _app.jsx getInitialProps is called every time when i navigate to a page that changes its content through query string. I do use routing apis to set the query, but that should only afect pages's getInitialProps not the _app's.
next.js version is 6.1.1.

[hadiranjbar25]

Is there any update with this issue? I am using v7, but it seems that layouts rerendering still exists. Any solution?

[lucacattide]

I haven't tried it yet, but seems that custom app override solves the problem.

[tky5622]

what does the custom app override mean ?
I'm also have the problem with making layout component and setting it in _app.js.
I really want solution for dynamic menu.