Next.js Link: Disable auto scrolling to top on page changes

May 23, 2022 A Goodman

In Next.js, when a user navigates from one page to another page by clicking on a <Link> component, they will be scrolled to the top of the destination page. This is the default behavior and it…

How to Run Next.js on Custom Port

May 23, 2022 A Goodman

By default, a Next.js app will run on port 3000 (both development and production). However, you can use another port if you like. This short and straight-to-the-point article will show you how to do so. Modifying…

Next.js: How to Highlight Currently Active Link

May 21, 2022 A Goodman

In a web app, giving an active link a special CSS style will enhance the user experience and makes it easier for them to navigate and know where they are. This article shows you how to…

How to style Link component in Next.js

May 21, 2022 A Goodman

In Next.js, <Link> components generally go with <a> tags. To style a link, we don’t directly add our CSS class names or inline styles to <Link>. Instead, we do that with the <a> tag. Example: Another…

Next.js: Extracting URL params inside getStaticProps function

May 21, 2022 A Goodman

In Next.js, If a page uses a dynamic route, params contain the route parameters. For instance, If the page name is [id].js, then params will look as follows: You can get URL params from inside your…

How to Create a Next.js App in the Current Directory

May 21, 2022 A Goodman

You can initialize a new Next.js app in the current directory by using a dot (.) for the path when running the npx create-next-app command. There is a mandatory requirement is that the name of the…

How to Use Styled JSX in React: A Deep Dive

May 20, 2022 A Goodman

This comprehensive article shows you how to use Styled JSX in a React application created by create-react-app (If you’re working with Next.js, see this article). Overview Before using styled JSX, you need to install the styled-jsx…

Next.js: Reading and Display Data from a Local JSON File

May 21, 2022 A Goodman

This short and straight-to-the-point article shows you how to read and display data from a local JSON file in Next.js. This is useful if you want to build a small web app quickly without having to…

React Router: Redirecting with the Navigate component

May 17, 2022 A Goodman

In this article, we’ll explore the fundaments of the <Navigate> component in React Router and then walk through a complete example of using it in practice. We’ll use the latest version of React Router (6.x) and…

React: 2 Ways to Open an External Link in New Tab

May 9, 2022 A Goodman

This article shows you two different ways to open an external link in a new browser tab in React. The first approach uses <a> tag, which is simple and quick but has some limitation. The second…

How to Use Tailwind CSS in React

May 7, 2022 Pennywise

Tailwind is a popular open-source CSS framework that can help you rapidly build user interfaces. It works very nicely with React and you can style your apps without leaving your Javascript (or TypeScript) code, thanks to…

React Router: useParams & useSearchParams Hooks

May 4, 2022 A Goodman

This article is about the useParams and useSearchParams hooks that come with React Router. We’ll cover the fundamentals of these hooks and then walk through a complete example of using them in practice. useParams hook The…

1 2 3 4 10