Nextjs version

[duythien0912]

It will be awesome if we have bulletproof-nextjs what do you think 😆

[alan2207]

Hey, that is a good idea and something I have already considered but it might be a bit redundant. I agree that choosing between next.js vs plain react is a very important architectural choice. Most of the time I am also choosing next.js as the default option, however, I wanted to make bulletproof-react universal to react and not tie it to next.js specifics and that is the only reason CRA is being used here. Pretty much all of the concepts here can be implemented in a Next.js application with a couple of differences:

• client-side vs SSR - some pieces of the code that rely on some browser APIs would not work on the server, so you would have to use https://nextjs.org/docs/advanced-features/dynamic-import with the ssr flag set to false in order to start using it once it is in the browser.

• pages/routes - instead of handling them with react-router, you would keep all the code in features, e.g src/features/pages/Discussion and that page would be used in src/pages/discussions/[discussionId].tsx by just re-exporting everything. That way all the code related to the page would be kept in its belonging feature.

• authentication - there are multiple options how you do that:

  • If you use API routes, you might want to check the next-auth package - https://next-auth.js.org/
  • if you are authenticating against a custom server you might want to create your own auth wrapper. Also, consider using httpOnly cookies to store the token.
  • you can read more about authentication here: https://leerob.io/blog/nextjs-authentication

• Persistent layouts - https://adamwathan.me/2019/10/17/persistent-layout-patterns-in-nextjs/

• This video shows a couple of useful tips and tricks specific to next.js: https://www.youtube.com/watch?v=R59e1Vl5lO8

Not sure if I missed something. I am curious about what @leerob thinks of this?

[leerob]

Auth and Layouts now have their own docs:

• https://nextjs.org/docs/authentication
• https://nextjs.org/docs/basic-features/layouts

[gregarnott]

I've been seeing a fair amount of developer intent (in module/project discussions and the like) towards using react-static instead of Next.

Ah, React... where every aspect has a swag of valid options, and everything ends up opinionated!
(Un-opinionated modules just get consumed into opinionated builds/systems)

"Next vs Gatsby vs react-static" as a search would likely yield a plethora of conflicting opinions...

[desiboli]

bulletproof-nextjs13 😝