If you love building dynamic web apps/sites with ReactJS and similar technologies, you would have definitely come across these issues:
If you enjoy building web apps with React but faces the issues discussed above, then Nextjs is here to your rescue.
Nextjs renders your pages on the server and sends the html together with any context data needed to fully rerender the page on the client side. All subsequent React state changes that causes a rerender happens only on the client side. So the initial pages request returns a full HTML page instead of JavaScript file that the browser must interpret.
The second cool feature of Nextjs that I will discuss is it's automatic code splitting. When you build a nextjs app/site, each page of the site is split and made independent by bundling with it all it's dependencies. This makes it possible to run each page as a lambda function. All pages without getInitialProps
, which is used to get initial data on the server before the initial page render and set as props for subsequent page renderings, can be prebuilt into a static html page that can be hosted on s3. This therefore removes the need for compute resources for rendering.
NextJS also makes it very easy to serve static files such as images by just placing them in a directory named public
in the project's root directory.
Created by
Evans is a Computer Engineer and cloud technology enthusiast. He has a Masters degree in Embedded Systems (focusing on Software design) from the Technical University of Eindhoven (The Netherlands) and a Bachelor of Science in Electronic and Computer Engineering from the Polytechnic University of Turin (Italy). In addition, he has worked for the high-tech industry in the the Netherlands and other large corporations for over seven years.