Changes and Benefits of Migration
Routing Changes:
We can easily set routing pages in NextJs, in two different ways:-
- We can create a pages folder in the root directory and create a file for each of our pages.
pages/blog/post.js
Or we can represent a dynamic route with a slug variable. Link this:
pages/blog/[slug].js
The value slug can be accessed as a parameter in the component using NextJs’s “userRouter“.
Data Fetching
There are many ways to acquire data in NextJs, but in this section, we’ll look at the most popular ones.
Static Generation (getStaticProps): Here NextJs run the “getStaticProps
” to fetch the data at the build time of the web app.
Javascript
export async function getStaticProps() { const res = await fetch( 'https://api.example.com/data' ); const data = await res.json(); return { props: { data, }, }; } function MyPage({ data }) { // Use the fetched data return ( <div> { /* Render the data */ } </div> ); } export default MyPage; |
Server-side Rendering (getServerSideProps): This is the most popular method in NextJs, and most developers use NextJs for this feature. Here “getServerSideProps” function runs on the server for every request and fetches the data, which is then passed as props to the page component. Example:
Javascript
export async function getServerSideProps() { const res = await fetch( 'https://api.example.com/data' ); const data = await res.json(); return { props: { data, }, }; } function MyPage({ data }) { // Use the fetched data return ( <div> { /* Render the data */ } </div> ); } export default MyPage; |
Client-side Rendering (useEffect/useSWR): Sometimes developers need their project to load data on the client side for that NextJs uses the “useEffect“.It is very similar to how we fetch data in ReactJs. Example:
Javascript
import { useState, useEffect } from 'react' ; function MyPage() { const [data, setData] = useState( null ); useEffect(() => { async function fetchData() { const res = await fetch( 'https://api.example.com/data' ); const data = await res.json(); setData(data); } fetchData(); }, []); // Use the fetched data return ( <div> { /* Render the data */ } </div> ); } export default MyPage; |
Image components and their optimization:
NextJs optimizes the image as users request them with the <Image/> component.
Javascript
function MyComponent() { return ( <div> <Image src= "/path/to/image.jpg" alt= "Description of the image" width={500} height={300} layout= "responsive" priority={ true } objectFit= "cover" objectPosition= "center" loading= "lazy" blurDataURL= "/path/to/placeholder.png" placeholder= "blur" /> </div> ); } |
SEO (Search Engine Optimization)
Today one of the major reasons to migrate from Gatsby to NextJs is the SEO(Search Engine Optimization), in NextJs we can create a separate SEO component `<SEO/>` like this with an SEO.js file, where we can add `<head><head/>` tag, `<meta/>` tag and add the important data of our website or web app.
Both Next.js and Gatsby are popular frameworks for building modern web apps, however, NextJs offers clear benefits over Gatsby. NextJs offers superior performance, SEO, and overall platform flexibility and capabilities. Due to its focus on the developer experience and continual improvements from the Vercel team, NextJs is an obvious choice for developers seeking to create high-quality, scalable apps. The benefits of migrating from Gatsby to NextJs are clear, and your forthcoming project would benefit greatly from NextJs’ variety and power.
Next.js Migrating from Gatsby
If you use Gatsby and want to switch to the newest NextJs ecosystem, you’ve come to the right spot. Here, you can learn all about the differences between the two technologies and discover why it’s the best moment to switch from Gatsby to NextJs.
Gatsby is an open-source framework used to build modern, high-performance websites and applications. It is based on React, a popular JavaScript library for building user interfaces which build by Facebook and published in 2013. With the help of Gatsby, static site generation can be used to build websites that load quickly and offer a positive user experience. Gatsby’s capacity to collect data from many sources, including content management systems (CMS), APIs, databases, or markdown files, and convert it into static HTML, CSS, and JavaScript throughout the build process is one of its most important capabilities. This facilitates quick initial page loads and makes it simple for search engines to index the material.
NextJs is a popular open-source framework for building modern web applications using React. It is built on top of React and provides additional features to enhance development and optimize performance. Next.js enables server-side rendering (SSR), static site generation (SSG), and client-side rendering (CSR) capabilities, giving developers flexibility in choosing the rendering strategy that best suits their needs.
Contact Us