DEV Community: Rakib Hasan

Next.js: A Deep Dive into the Game-Changing React Library

Rakib Hasan — Tue, 04 Apr 2023 10:05:56 +0000

If you're a web developer who's interested in creating server-side rendered (SSR) React applications, Next.js is one of the best options you've got. I recently started learning Next.js and wanted to share my first impressions of this powerful framework.

One of the first things that struck me about Next.js If you're a web developer who's interested in building server-side rendered (SSR) React applications, Next.js is a powerful framework that can help streamline your development process. In this post, we'll take a closer look at Next.js and explore some of its key features and benefits.

One of the major advantages of Next.js is its built-in support for SSR. This means that the initial HTML is generated on the server and sent to the client, which can improve performance and SEO. With other frameworks, you may need to set up SSR yourself, which can be a time-consuming process.

Let's take a look at an example of how SSR works in Next.js. Suppose you have a simple React component that fetches some data from an API and displays it on the page:

import { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      <h1>My Component</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default MyComponent;

Normally, when you render this component in the browser, the data will be fetched and displayed on the page after the initial HTML has loaded. However, with SSR in Next.js, you can generate the HTML on the server and send it to the client with the data already included. Here's how you can modify the component to support SSR:

import { useState, useEffect } from 'react';

function MyComponent({ data }) {
  const [localData, setLocalData] = useState(data);

  useEffect(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => setLocalData(data));
  }, []);

  return (
    <div>
      <h1>My Component</h1>
      <ul>
        {localData.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export async function getServerSideProps() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();

  return {
    props: {
      data,
    },
  };
}

export default MyComponent;

In this modified version of the component, we've added a getServerSideProps function that fetches the data from an API and passes it to the component as a prop. We've also modified the useState hook to use the data that's passed in as a prop, and added an additional fetch to update the data on the client side.

With this setup, Next.js will generate the HTML on the server and send it to the client with the data already included. This can help improve the performance of your application, especially if you have a lot of dynamic content that needs to be fetched and rendered.

Another feature of Next.js that I found helpful was its folder-based routing system. This allows you to create routes based on the structure of your project's file system. For example, if you have a file named pages/about.js, it will automatically create a route for /about. This can make it easier to organize your code and create a clear, predictable URL structure.

Here's an example of how folder-based routing works in Next.js:

pages/
--| index.js
--| about/
-----| index.js
-----| team.js

In this example, we have an index.js file in the root pages directory, as well as an about directory that contains two files: an index.js file and a team.js file. With folder-based routing, the index.js file in the root directory corresponds to the root URL (/), while the index.js file in the about directory corresponds to the /about URL. The team.js file in the about directory corresponds to the /about/team URL.

In my experience, getting started with Next.js was relatively straightforward. I used the create-next-app CLI tool to set up a new project, and then began exploring the framework's features. The official Next.js documentation is well-written and provides helpful examples, so I was able to quickly get up to speed.
Here is the official documentation link : Getting Started With Next.js

One drawback of Next.js is that it has a bit of a learning curve, especially if you're new to React or SSR. However, with some patience and persistence, I was able to overcome this hurdle and start building my first Next.js application.

Overall, I would definitely recommend Next.js to other developers who are interested in server-side rendering or building React applications. Its built-in support for SSR and folder-based routing make it a powerful and convenient tool, and its growing community means there are plenty of resources available for learning and troubleshooting.

"Streamlining Data Management in React with React Query: A Comprehensive Guide and Sample Project"

Rakib Hasan — Fri, 31 Mar 2023 06:34:43 +0000

React Query is a powerful data management library that simplifies data fetching, caching, and updating in React applications. With its simple, declarative API and support for complex data scenarios like pagination and optimistic updates, React Query is a great choice for any React developer looking to streamline their data management code.

One of the key benefits of React Query is its ability to cache data and automatically handle stale data. This means that if a component needs to render data that has already been fetched, React Query will return the cached data rather than making a new network request.

Additionally, React Query includes a number of features that make it easy to manage complex data fetching scenarios, such as pagination, optimistic updates, and polling.

Now that we've covered the basics, let's dive into some of the key features of React Query

-- Querying Data:
At its core, React Query is all about fetching and managing data. To fetch data, you can use the useQuery hook, which takes a query key and an async function that returns the data you want to fetch. Here's an example:

import { useQuery } from 'react-query'

function MyComponent() {
  const { isLoading, data } = useQuery('todos', async () => {
    const response = await fetch('/api/todos')
    return response.json()
  })

  if (isLoading) return <div>Loading...</div>

  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  )
}

In this example, we're fetching a list of todos from an API and rendering them in a list. The useQuery hook takes a string key ('todos') that is used to cache the results, as well as an async function that fetches the data.

-- Mutating Data:
In addition to fetching data, React Query also provides a way to mutate data using the useMutation hook. This hook takes a mutation function that performs the update on the server, and returns an object with a mutate function that you can call to trigger the mutation.

import { useMutation, useQueryClient } from 'react-query'

function AddTodo() {
  const queryClient = useQueryClient()

  const { mutate, isLoading } = useMutation(
    async (todo) => {
      const response = await fetch('/api/todos', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(todo)
      })
      return response.json()
    },
    {
      onSuccess: () => {
        queryClient.invalidateQueries('todos')
      }
    }
  )

  const handleSubmit = async (e) => {
    e.preventDefault()
    const { value } = e.target.elements.title
    mutate({ title: value })
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="title" />
      <button type="submit" disabled={isLoading}>
        {isLoading ? 'Adding...' : 'Add'}
      </button>
    </form>
  )
}

In this example, we're using the useMutation hook to add a new todo to the server. The mutate function takes an object with the data to be added, and automatically updates the cache with the new data when the mutation is successful.

--Paginating Data:
Another common scenario in data fetching is pagination. React Query makes it easy to implement pagination using the useInfiniteQuery hook, which allows you to fetch data in chunks and add them to the cache as they are loaded.

import { useInfiniteQuery } from 'react-query'

function MyComponent() {
  const { data, error, fetchNextPage, hasNextPage, isFetching } = useInfiniteQuery(
    'todos',
    ({ pageParam = 0 }) => fetch(`/api/todos?page=${pageParam}`).then(res => res.json()),
    {
      getNextPageParam: (lastPage) => lastPage.nextPage,
    }
  )

  if (error) return <div>Error fetching data</div>

  return (
    <>
      {data.pages.map(page => (
        <ul key={page.pageNumber}>
          {page.todos.map(todo => (
            <li key={todo.id}>{todo.title}</li>
          ))}
        </ul>
      ))}

      <button onClick={() => fetchNextPage()} disabled={!hasNextPage || isFetching}>
        {isFetching ? 'Loading more...' : hasNextPage ? 'Load More' : 'Nothing more to load'}
      </button>
    </>
  )
}

In this example, we're using the useInfiniteQuery hook to fetch todos in pages from an API. The fetchNextPage function is used to load the next page of todos, and the hasNextPage property is used to disable the "Load More" button when there are no more pages to fetch.

The getNextPageParam function is used to return the nextPage value from the last page of data, which is used to fetch the next page of data.

If you want to learn more about React Query, there are many resources available online. One great place to start is the official React Query documentation, which provides detailed information on how to use the library.
Official Documentation Link:
Here is the official documentation of the library.

Additionally, there are many excellent YouTube tutorials available that cover React Query in-depth. One such channel is Code Evolution, which has a comprehensive React Query tutorial series that covers everything from basic usage to advanced topics like pagination and optimistic updates. Here is the playlist link that I have followed and it's great if you ask me.
Youtube playlist that I have followed

If you want to see React Query in action, you can check out a sample project that uses the library. I have created a GitHub repo that contains a simple React application that fetches data from an API using React Query. The project also demonstrates how to implement pagination using the useInfiniteQuery hook. Here is the repo link that I have created.
The project repo
I have followed the youtube tutorial link that I have given here.

In conclusion, React Query is a powerful and flexible library that makes it easy to manage data in React applications. Whether you're a beginner or an experienced developer, React Query is definitely worth checking out!

Deep Dive into JavaScript.

Rakib Hasan — Sat, 04 Mar 2023 07:15:06 +0000

JavaScript is one of the most used programming languages right now. With the technologies becoming more and more superior, the need of learning this language is increasing day by day. As a Computer Science I have basic or intermediate level knowledge of C,C++,Java and Python. But last year I took an interest on JavaScript, and I started loving this language. Now I am an entry level React developer preparing for interviews. So I started relearning JavaScript as part of the process. So I want to share this journey with the likes of me who are trying to get into a development job.

mrakib007 / vanilla-js-practice

Here I will start javaScript from the very beginning till the advanced level.

This is the repository where I am keeping all my codes just to check up on it when I need them.
Now, practicing JS from scratch making me love this language even deeper. I hope many JS enthusiasts will find this repo helpful.