bene : studio is a global consultancy, helping startups, enterprises and HealthTech companies to have better product
Why we love Next.js and server-side rendering
At bene : studio we love knowledge sharing to help the community of professionals. With 10+ years and over 100 projects behind us, we have a vast amount of experience. This is why we have launched a knowledge base on our blog with regular updates of tutorials, best practices, and open source solutions.
These materials come from our internal workshops with our team of developers and engineers.
Next.js has become popular in the last years but why is it such desirable amongst developers? Next.js is a framework built on top of React. It makes server-side rendering possible without any complex configuration. Besides that, it offers several out-of-the-box features which help developers to be faster and more effective. It has a fast learning curve which makes it easy for less experienced developers to implement its amazing features.
Why should you use Next.js instead of create-react-app?
Search engine optimization
Next.js allows you to build a React app and render the content on the server in advance. After the initial load is finished, client-side rendering takes over and works exactly like a traditional React app.
Here we have a dogs route which represents a list of dogs on a page. Let’s assume that the list is dynamically generated and the user wants to get more information about a specific dog. For that, we can easily generate dynamic routes. All we have to do is to wrap the file name in brackets, then next.js will recognize this as a dynamic route.
Data fetching & pre-rendering
Next.js has two types of pre-rendering. Static generation and Server-side rendering. Static generation is also called pre-rendering which allows you to render your pages at build time. With this, you generate a bunch of HTML files and upload them on a static host and they can be opened over a CDN which makes it super fast to visually display the data. With this technique, you can build all your HTML locally and even catch your data. This can be useful when the data doesn’t change often.
In each page’s component, you can implement a getStaticProps function. Within this function, you can fetch data from an API. Then the result can be passed as props to your component.
In case your data changes often you can implement server-side rendering with getServerSideProps where the page is rebuilt each time the user opens it. While getStaticProps runs and builds time getServerSideProps runs at request time. That means the page will fetch the latest data from the server each time a new request is made. getServerSideProps needs to be implemented exactly like getStaticProps.
We like to use styled-component for our styles so let’s see how to implement it in a Next.js application. Fortunately, it is possible to achieve server-side rendering with styled-components. The way it works is that every time you render your app on the server it creates a ServerStyleSheet and adds a provider to your React tree which accepts styles via a context API.
There are multiple ways to successfully perform server-side rendering. The styled-components documentation recommends using their babel plugin. This plugin checks mismatches by providing a unique id to each styled element.
Here is what you need to install to get it started:
npm install –save styled-components
npm install –save-dev babel-plugin-styled-components
After installing them create a file called .babelrc in your roots directory. Inside the file, the code should look like this:
Then you need to add a file named _document.js inside the pages directory then copy the code from below to inject the server-side rendered styled into the <head>
After creating this file you will be able to use styled-components within your Next.js application.
Next.js has countless benefits. It helps with SEO by providing a performant app which means your app will get higher rankings on search engines. If you have a lot of data fetching then you should consider using it over React Js since it provides server-side rendering which can also increase the performance of your website. If you have fewer api requests and you only need client-side rendering while SEO is not important for your app then React.js might be a good option for you.
How to create a Next.js app
FIrst you have to install NPM or Yarn on your machine. Then run the following command:
In package.json you will see the scripts that were generated.
DEV: In development, you only have to execute the „dev” script which will run your app on localhost:3000
BUILD: If you run the build script a built application will be created which will be ready for deployment
START: The start command will build your Next.js application
LINT: It will lint your Next.js project using ESLint to warn you if your code needs to be fixed before deployment.
For a more in-depth tutorial we recommend you to check out the official Next.js documentation. They have an interactive course that provides an effective way to learn every detail.
Join our team, we are hiring!
Read moreSee all open source
Using Schedulers and Cron in Node.JS
Follow out tutorial and learn about scheduling in Node JS
Principles of wiriting clean code
Lessons we learned from our favourite book on software development.
Integrating Garmin into a running app
Learn how we integrated Garmin library into the Coopah running companion app and what challenges we came accross.
Functional programming in Java with examples
See examples if this style of programming, to make code more concise and less complex.
How to become a VSCode power user
In this article, we are going through some of our most commonly used extensions, key bindings, and best practices.
Let bene : studio enhance
your digital product!