Convert from CRA to Next?

[ivanoats]

We should consider moving from a Create-React-App base to NextJS

1) more of a production grade system 1) API route and SSG capabilities 1) better experience builder for resumes for bootcampers / GSoC students

Docs: https://nextjs.org/docs/migrating/from-create-react-app

What do you think? Add this to the Roadmap? (#23)

[DhananjayPurohit]

I completely agree.

[Devesh21700Kumar]

Yeah i guess it might be better with NextJS. probably even more benefits if we have a quite some number of pages ,then NextJS's API route and SSG coukd be used

[sahil-shubham]

Hi there @ivanats, I have worked with NextJS for a few projects and looked into the prospects of moving the current repository from Create-React-App to NextJS. These are my thoughts, let me know what you think about them:

• Image Optimization - Nextjs offers a component named "Image" which brings features like lazy loading, quality, priority for loading of specific images etc. but at the moment it also breaks any build which uses the command next export, which is also necessary (we can remove it's need by making a node.js server) for deploying the site (currently orcamap-react is hosted on netlify). It happens because next on itself cannot optimize images on build (hence the need of node.js server)

  Issue mentioning the same - vercel/next.js#18356

  Conversation requesting the feature request - vercel/next.js#19065

  If we end up moving to Next.js we would have to use the package named next-optimized-images.

• Typescript support - One may call this nitpicking but although next.js does offer faster reloads on file changes and typescript support, it doesn't offer type checking while in development. Which is not something one would want for a project as the project may end up failing builds but working in development.

  This can be fixed by using a plugin and configuring it to run on file changes. One can read more about it here, I have tested this and this works well.

• Nextjs handles the routing of the components on it's own, if we move this project to next.js we can remove react-router completely but would have to change the current folder structure to something as following:

  components/
  
  |____(different components to be used in pages)
  
  pages/            --- any file in this folder would be routed based on it's name 
  
  |____api/
  
  |____(files)
  
  public/
  
  |____images/
  
  | |____(All the image content)
  
  styles/
  
  |____(Styles for components filetype:scss)

• Nextjs offers pre-rendering which is big plus point as already mentioned but what is more interesting that one could have a middle ground by having your "static site" fetch data on reload, which is exactly what we would need for orcamap. Read more here.

  Pre-rendering offers a better search engine optimization, which may lead into someone finding orcasound or orcamap comparatively easily. Hence, I would recommend to have our blogs on this site too, as more text means making a better use of pre-rendering (because unlike a normal create-react-app based website, next uses server side rendering to render the basic html of the page almost instantly)

TL;DR In my opinion, moving to next would open a lot of features which can be used in the future if not being used now. Moving to next.js would be a little hard in the beginning but because of orcamap-react being in the beginning stages, one would appreciate the move later. We would also get to learn a lot of new things, which is what I always look forward to.