Why I’m using NextJs on my current project
A few weeks ago I was introduced to NextJs from a fellow student at Flatiron from a different cohort. So I looked up the docs on NextJs and was amazed at how simple it was. NextJs utilizes React also, and as someone who loves using React I felt this was a no brainer. After using ReactJs for the past couple of months, I wanted to dip my feet into different types of frameworks out there and I was excited to start my next project with NextJs. So I decided create my portfolio website using NextJs.
What is NextJS?
NextJs is an open-source React front-end development web framework and enables server-side rendering developed by Vercel. Unlike a traditional React application, where the React Application is loaded and then rendered on to the client, NextJs allows the first page load to be rendered by the server which is good for SEO & performances. Unlike ReactJs where all the JavaScript is rendering to a single HTML page, meaning if you go to the page source of your web page, you will only see the default html tags and won’t see the contents of the page. NextJs loads all the html contents via server-side which search engine crawlers can pick up, thus making it great for SEO.
Routing
One of the things that initially attracted me to NextJs was how easy routing is with NextJs. By simply creating files NextJs, automatically generates routes to those pages.
By simply creating files, NextJs generates routing for my pages. For example, just by creating the ‘findme.js’ file, Users can access the link example.com/findme . By also creating a folder(projects in my example) within the pages it generates example.com/projects/concertio and example.com/projects/what2eat .
Since NextJs uses React, we can simply use a React Component called Link we can create a client-side route transition.
<Link href="/findme"> findme </Link>
However, that is not the only way to create routes. NextJs also delivers Dynamic Routing. You can find more information here
Pre-rendering
By default, NextJs pre-renders every page. It generates the HTML for each page in advance on the server instead of rendering it by client-side.
NextJs has two forms of pre-rendering:
Static Generation — which the HTML is generated at build time and will be reused on each request.
Server-side Rendering — which the HTML is generated on each request
Static Generating in NextJs is just like React.
However, if we need the component to render information from external data, we will need to use getStaticProps in the same file. This async function gets called at build and lets you pass fetched data to the pages props on pre-render.
NextJs recommends using static generation whenever possible. As long as the information on the page is able to pre-render ahead of the users request. However, as we know, this is not always possible. There will be time when the page will require real-time information. If that’s the case then we can use getServerSideProps
As you can see, both getStaticProps() and getServerSideProps() are almost identical. However, the only difference between the two is that getServerSideProps() is run on every request instead of on build time. If you like to see them both in action, I would highly recommend checking out this live Demo. https://static-next-willemliu.vercel.app/
Conclusion
Although I’ve only worked with NextJs for about a week, I’m really enjoying the simplicity of it. A lot of companies are making the transition to NextJs such as Netflix, Nike, TikTok, Hulu and many more! I didn’t go through everything NextJs has to offer, but if you’re interested in using NextJs in your next project, check out their website (nextjs.org)
resources
