1

I'm creating a website using NextJS and Strapi as CMS. I would like to edit navbar links from Strapi.

In my NextJS app I created a layout component to wrap my pages in the _app.js file. This layout is containing header, navbar and footer. Here it is the file architecture :

pages:

  • _app.js
  • index.js
  • page1.js

layouts:

  • default.js

services:

  • menuService.js

As my Layout component wrap the pages in _app.js I don't know where server-side calls the links for my navbar by calling Strapi API. Indeed, I can't use getServerSideProps() in _app.js because NextJS doesn't handle it and getStaticProps() renders client-side when we use component Link to redirect the user.

Actually I'm stuck and don't know how to do. This is really simple feature but it seems that NextJS doesn't handle this kind of dynamic content actually.

The only solution I found at present is to use my Layout component in all of my pages to wrap the content directly (not throught _app.js) and use the props returned by getServerSideProps() in the same pages. But this is a really heavy solution.

ebillis
  • 224
  • 1
  • 4
  • 19
  • 2
    Does this help answer your question: [Persistent navigation in a NextJs _app](https://stackoverflow.com/a/65628271/1870780)? – juliomalves Apr 01 '21 at 14:38
  • @juliomalves working like a charm ! Thanks a lot ! So I had to use GetInitialProps instead GetStaticProps. I must read more documentation about GetInitialProps to be sure this will not cause another issue. But, it's actually work and the main issue with GetStaticProps (I mean it's rendering in client-side sometimes) doesn't seems to appear ! – ebillis Apr 01 '21 at 15:04
  • EDIT: That's wrong, issue is the same as GetStaticProps, if we navigate to a page which doesn't have GetServerSideProps, GetInitialProps will be executed in client-side – ebillis Apr 01 '21 at 15:11
  • Yes, that's just how `getInitialProps` works. As a workaround, you could add a `getServerSideProps` to all the pages you use (even if it wouldn't have any logic in it) to avoid having `getInitialProps` run on the client - it will run on the server-side instead. – juliomalves Apr 01 '21 at 15:14
  • Thank you for the explanation and the workaround. I will keep it in mind if the custom document answer proposed by Sean W can't load SCSS modules. – ebillis Apr 02 '21 at 07:33

1 Answers1

1

You could use a custom _document / render page that would inject props globally. There are some caveats,however, they don't appear to be a problem for your use case.

You could also use the Singleton method as descried in this answer.

Sean W
  • 5,663
  • 18
  • 31
  • Thank's for your answer. It's seems to work, and there no issue even if the aimed page doesn't have getServerSideProps ! But, the style (SCSS Modules in my case) doesn't load for the navbar component – ebillis Apr 02 '21 at 07:32
  • Importing my DefaultLayout component (containing the navbar component) in the _app.js in addition to the custom document seems to fixed the style issue ! Thank's a lot for your help. Case solved ;) – ebillis Apr 02 '21 at 08:16
  • @ebillis did this end up working? I have a dynamic navigation that I have to call on every page... and its so silly. I use both SSG and SSR on my site. – james emanon Mar 12 '22 at 06:34