<![CDATA[ Quincy Oghenetejiri Ukumakube - freeCodeCamp.org ]]> https://www.freecodecamp.org/news/ https://cdn.freecodecamp.org/universal/favicons/favicon.png <![CDATA[ Quincy Oghenetejiri Ukumakube - freeCodeCamp.org ]]> https://www.freecodecamp.org/news/ Eleventy Wed, 10 Jun 2026 23:15:56 +0000 60 <![CDATA[ How to Use the App Directory in Next.js ]]> https://www.freecodecamp.org/news/app-directory-nextjs/ 66ba2f4bd8f1b6513f67389e Thu, 15 Feb 2024 00:52:55 +0000 When you're building a project using the latest version of Next.js, you'll be prompted to select between using the app/ directory or the pages/ directory. The app/ directory is now the recommended way of building apps in Next.js.

In this article, you'll learn how to maximize the potential of the app directory in Next.js by learning about its available features.

Table of Contents

The app/ Folder

The app/ directory in Next.js comes with a lot of features, unlike the pages/ directory. Some of these features include:

  • Layout
  • Routing
  • Fonts usage
  • Loading Component
  • Error Component
  • Not Found Component
  • Template Component
  • Server Component

Layout

Using Layout in thte app/ directory makes it simpler to lay down complex interfaces that enable advanced routing patterns, prevent costly re-renders, and maintain state across navigations.

In the app/ directory, you can utilize the Layout function by creating a layout.jsx file at the root of the app/ directory. This defines a user interface (UI) that is shared across multiple locations.

A layout can render another layout or a page within it. Whenever a route changes to any component within the layout, its state is preserved because the layout component does not unmount.

Image An image showing a nested layout in the app directory

How to add meta tags to Layouts

Meta tags are small pieces of information that provide details about a webpage to browsers and search engines.

To add meta tags to your application when using the app/ directory in Next.js, you can use metadata in the layout.js file. The metadata is exported from the file, similar to the following code snippet:

export const metadata = {
  title: 'Keyword Title',
  description: 'Any Keyword,Another Keyword, More Keywords ',
};

Overriding the meta tag of the main layout is crucial when you want to have different meta tags for each route. To override these, you need to export the variable metadata from the route file where you want the meta tag to take effect.

There's no _app.js file

The _app.jsx file has disappeared from the app/ directory. As you may have anticipated, we will store everything under the layout.jsx file, which is the basic layout when using the app/ directory in Next.js.

If, for instance, you want to use Chakra UI, you will need to place the provider in the layout.jsx file. Below is a code snippet from the Chakra documentation demonstrating how to link the provider to the layout file:

// app/providers.tsx
'use client'

import { ChakraProvider } from '@chakra-ui/react'

export function Providers({ children }: { children: React.ReactNode }) {
  return <ChakraProvider>{children}</ChakraProvider>
}

// app/layout.tsx
import { Providers } from './providers'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    <html lang='en'>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

Routing

Routing in the app/ directory involves the use of strictly folder-based routing. This is unlike the pages/ directory, which allows the use of either file-based routing or folder-based routing.

Folder-based routing involves creating a folder where the name of the route should match the name of the folder, and then creating a page.js file which references the / URL of that folder.

For instance, if you create a folder called about, and a page.js is created in that folder, assuming you are still using a development server, the URL will be localhost:3000/about. Similarly, any folder created anywhere in the app/ directory will follow this pattern.

Nested routing

Nested routes in the app/ directory involve creating or nesting folders within others. Since each folder in the app/ directory corresponds to a route, with the page.js file in the respective folder pointing to the / URL of that folder, you can create nested routes by placing folders within other folders.

For example, the /dashboard/analytics URL path would correspond to a folder structure like app/dashboard/analytics, with a page.js file present in the analytics folder to make the route publicly accessible.

Route group

Due to the folder-based approach of the app directory, each folder containing a page.js file is automatically considered a route for that application.

To avoid using the folder name directly in the route, you can enclose the folder name in parentheses, such as (name_of_folder), which effectively groups the routes under that name. You can see this visually represented in the image below:

Image Image Illustrating Route Group

Fonts Usage

In Next.js 12, installing fonts in the page/ directory involves copying the font stylesheet link into the CSS file.

But in Next.js 13, the process in the app/ directory involves using the import keyword to import any font of your choice from next/font/google. After importing, the subset of the font is initialized and stored in a variable which is then added to the body tag as a class. 

//importing the fonts 
import { Inter } from 'next/font/google';

//initialising a variable 
const inter = Inter({ subsets: ['latin'] });



export default function RootLayout({ children }) {


  return (
    <>
      <html lang="en">
        //Adding the variable as a class to the body tag
        <body className={inter.className}>
            {children}
        </body>
      </html>
    </>
  );
}

How to create a favicon

Similarly, the way we import fonts in Next.js has evolved since its introduction, and so has the method for creating a favicon.

In the app/ directory, creating a favicon in Next.js involves either creating or replacing the favicon.ico file located in the root folder of the app directory with the image you wish to use. Note that if your image is in another format, such as JPG, PNG, or SVG, you need to convert it to ICO format.

The loading.jsx file.

Utilizing a loading component is a useful feature in Next.js, where you can obtain the loading function simply by creating a file named loading.jsx in the designated folder. This is particularly useful when you are fetching data from an API and need to display a loading state while awaiting the response.

You can create a loading.jsx file that sets its state to 'loading' while waiting for the API response.

Here's an example of what a loading.jsx file might look like:

// app/loading.jsx 
const loadingPage = ()=>{
    return (
        <div className="loader">
            <div id="loader-wrapper">
                <div id="loader">
                <img src="/img/Spinner-1s-120px.gif"/>
                </div>
                <div className="loader-section section-left">

                </div>
                <div className="loader-section section-right"></div>


      </div>
        </div>

    )
}

export default loadingPage

The error.jsx file.

The error.jsx file is a special file used to handle server-side errors. It is part of the new error handling features introduced in Next.js version 13.4.

This file is intended to replace the traditional pages/error.js or pages/_error.js files for handling errors in a more centralized manner.

One main advantage is that this file can handle both client-side and server-side errors. It can receive a statusCode prop to determine the type of error that occurred and display the appropriate message or style.

Below is an example of what an error.jsx file could look like:

// app/error.jsx
function Error({ statusCode }) {
  return (
    <div>
      <h1>Error</h1>
      <p>An error {statusCode} occurred on server</p>
    </div>
  );
}

Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode :  404;
  return { statusCode };
};

export default Error;

In the example above, the Error component receives a statusCode prop, which is determined in the getInitialProps method. This method checks if there is a response object (res), an error object (err), or defaults to 404 if neither is present. The status code is then displayed in the error page.

The not-found.jsx file

The not-found.jsx file is a special file convention used to handle cases where a user navigates to a route that doesn't exist within that application. It is typically used to render a custom "Not Found" page when a requested resource cannot be found

Here's an example of what a not-found.jsx could look like:

// app/not-found.jsx
import Link from 'next/link';

export default function NotFound() {
  return (
    <div>
      <h2>Not Found</h2>
      <p>The page you were looking for does not exist.</p>
      <Link href="/">Go back home</Link>
    </div>
  );
}

The template.jsx file.

Imagine you have a box of LEGO blocks, and you want to build different types of cars. A template.jsx file in Next.js is like a special blueprint that helps you build those cars. Each car has a different design, but they all follow the same basic rules of building.

The template.jsx file tells Next.js how to put together the pieces for each page of your website. Just like how you might use a simple blueprint to build many cars, the template.jsx file gives instructions for building many web pages.

Every time you want to make a new page, you would follow the blueprint. But unlike a normal blueprint, this one gets wiped clean after you finish making a page, so you start fresh with a new page. This is why it's called a "template" – it's something you use as a starting point for building something else.

Sometimes, you might want to add a special feature to just one car, like a glow-in-the-dark bumper. In Next.js, you could do this with a template.jsx file by adding a special piece of code just for that one page. After you finish, you'll forget about the special feature because the blueprint gets erased.

So, in short, a template.jsx file is like a special rule book that helps you make different pages on your website, and it starts fresh for each new page you make.

How is it different from layout.jsx file?

In Next.js, both template.jsx and layout.jsx are used to wrap around pages and provide a common structure, but they behave differently when it comes to navigation and state preservation.

Layouts (layout.jsx): These are persistent and maintain their state across different routes. They are ideal for elements that should stay the same and consistent throughout the navigation, such as headers, footers, and sidebars.

Layouts minimize re-renders and help boost performance since they don't re-mount and re-render upon navigation.

Templates (template.jsx): These are not persistent and create a new instance for each of their children on navigation. This means that when a user navigates between routes that share a template, a new instance of the component is mounted, DOM elements are recreated, and state is not preserved.

Templates are useful when you need to isolate components from sharing state or behaviors, or when you need to trigger certain effects or state changes every time a user navigates to a component.

For example, they are suitable for collecting feedback with a useState managed form that's unique to each page or tracking page views with useEffect.

In essence, layouts are for consistent, stateful elements, while templates are for distinct, state-independent components that need fresh state on each navigation. You would choose layouts for efficiency and consistency, and templates for isolated, state-independent components that require fresh state on navigation.

Server Components

Server components are now the default state of the app directory in Next.js . They allow you to perform server-side rendering in your front-end application, which reduces the amount of JavaScript code sent to the client.

Some of the benefits of using server components include:

  • Data fetching
  • Security
  • Caching
  • Bundle Sizes
  • Search Engine Optimization and Social Network Shareability

Server side rendering (SSR) vs server components in Nextjs

The key differences between these two lie in where they are used (pages vs. app), how they affect the client-side bundle size, and the level of control they provide over rendering.

Server Components offer a way to leverage server-side logic without the overhead of traditional SSR, which can lead to better performance and maintainability for modern web applications.

Also, while both SSR and Server Components render on the server, the latter does not support interactivity—a process known as hydration—with JS, and as such, event handlers and React features such as useState, useEffect, and other DOM operations do not function with it.

You can gain access to these features by converting the default server component into a client component by placing the useClient directive at the top of the code.

Conclusion

The app/ directory in Next.js offers a robust set of features designed to enhance the developer experience and optimize the performance of applications.

By leveraging the app/ directory, you can take full advantage of the latest advancements in Next.js, such as the Layout component for managing UI consistency and state preservation, folder-based routing for streamlined navigation, and the ability to import fonts and create favicons with ease.

The introduction of special files like loading.jsx, error.jsx, and not-found.jsx provides a centralized approach to handling loading states, errors, and non-existent routes, respectively.

Also, the template.jsx file acts as a blueprint for constructing web pages, offering flexibility for unique page designs while ensuring a consistent structure.

Server components, now the default in the app/ directory, also offer significant benefits

At this point you are confident enough to utilize this features in building powerful, scalable, and maintainable applications with Next.js.

###

]]> <![CDATA[ How to Use Redux Toolkit to Manage State in Your React Application ]]> https://www.freecodecamp.org/news/use-redux-toolkit-to-manage-state-in-react-apps/ 66ba2f4d54ccc2d852dc891a Mon, 24 Apr 2023 21:38:24 +0000 State management is one of the most important things you'll deal with in front end development.

You can manage state in React in various ways. Some examples include using state in class components, using React hooks such as useState and useEffect hook, using the Context API, or using Redux.

In this article I will show you how to use the Redux toolkit for state management in React.

Prerequisites

  • Basic knowledge of React (beginners are welcome) and JavaScript is required.
  • Have Node installed so you can download the package using npm.

What is Redux toolkit?

Redux Toolkit is a set of tools you can use for state management in React in place of Redux. The Redux team created it.

Redux Toolkit offers a standardized approach to building Redux code and comes with libraries and tools that make it simpler to create scalable, maintainable, and effective Redux code.

How is it different from the old Redux?

Redux toolkit is different from Redux in a few ways. First, it has less boilerplate code, and it has decent support. It also works best with functional components (unlike Redux which works best with class components).

There are various reasons why you should use Redux toolkit over Redux for state management:

  1. Less boilerplate code than Redux.
  2. You don't have to set up thunk manually in Redux toolkit as it comes with createAsyncThunk. This enables you to perform async operations.
  3. Enhancing developer experience: Redux Toolkit includes a number of tools and utilities that can enhance the developer experience, such as the ability to use Redux DevTools out-of-the-box.
  4. Redux hooks like useSelector and useDispatch make your code shorter and easier to read/write.
  5. Improving performance: Redux Toolkit includes a built-in memoization feature that can help improve the performance of your Redux application by reducing unnecessary re-renders.

In summary, Redux Toolkit is a great choice for developers who want to simplify their Redux code and improve performance, while also enhancing the developer experience. It can be particularly useful in larger, more complex applications where managing state can become difficult.

How to Get Started with Redux Toolkit

For this project, you won't use create-react-app to create your React app. Instead, you'll use Vite and React plugins. This is because CRA is no longer recommended by the React docs.

To create your app, run the code below in your terminal:

npm create vite@latest my-app --template react

Next, run the following commands in the terminal:

cd my-app
npm install
npm run dev

How to install Redux Toolkit

To make use of Redux Toolkit in your project, run the code below in your terminal:

npm install @reduxjs/toolkit react-redux

How to create a Redux store

After the installation is complete, create a file named src/redux/store.jsx . Import configureStore from Redux Toolkit and then create an empty Redux store which will be exported like you can see in the code below:

import { configureStore } from '@reduxjs/toolkit'

export const store = configureStore({
  reducer: {},
})

This code creates a Redux store, and also automatically configures the Redux DevTools extension so that you can inspect the store while developing.

How to connect the Redux Store to React

After you've created the store, you will have to wrap your <App/> with a <Provider/> which will be imported from react-redux. Also the store you created above will be passed in into the provider as a prop.

//main.js
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
//Importing the store we created above
import { store } from "./redux/store"
//importing the provider from react-redux  
import { Provider } from 'react-redux'

ReactDOM.render(
    //This makes the store accessible to the App that is passing it as a prop
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

How to create a Redux state slice

After the store has been created, create a file src/redux/countslice.jsx. Then import createSlice from @redux/toolkit.

A Redux slice is a concept introduced by Redux Toolkit that represents a self-contained piece of the Redux store that includes a reducer function, initial state, and action creators.

Slices provide a way to organize and modularize Redux code, making it easier to manage and maintain as your application grows. You can think of slices as mini-Redux stores that handle a specific piece of state within your application.

Creating a slice requires three things:

  • Name, which is usually set to be a string.
  • Initial State Value.
  • Reducer, which contains actions that define how the state can be updated.

Creating a state slice creates a more modular and maintainable architecture for your application, making it easier to reason about and update as your application grows.

By organizing your Redux code into slices, you can create a more modular and maintainable architecture for your application, making it easier to reason about and update as your application grows.

After you create the slice, the reducers and the Redux actions inside the reducers are exported differently. This is because the slice created will need to be exported before it can be used inside the store.

By exporting the reducer from the slice, you can easily use it to configure your Redux store. It also makes it easy to test the reducer in isolation, without needing to set up a full Redux store. This can be useful for unit testing and ensuring that the reducer behaves as expected for each action it handles.

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  count: 0,
}

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.count += 1
    },
    decrement: (state) => {
      state.count -= 1
    },
    incrementByAmount: (state, action) => {
      state.count += action.payload
    },
  },
})

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

How to add the slice to the store

The Reducer exported from the slice is imported and added to the store you created earlier. This allows you to complete the configuration of the store.

//store.jsx
import { configureStore } from '@reduxjs/toolkit'
//Importing the reducer from countSlice
import counterReducer from "./countslice"

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
})

How to use the state and actions in your React components.

Up until now, you've just been going through the initial set up for Redux Toolkit, setting up the store and creating the reducer. Now you need to start making use of the state and actions in your app to achieve the desired functionality.

You will be using two hooks: useDispatch and useSelector . Data are being read from the store through the useSelector hook while the actions are being dispatched using the useDispatch hook.

The corresponding actions (increment, decrement, and incrementByAmount) are being imported from the countSlice.jsx file to be used by the dispatch.

Take a look at the code below where the state is set to a variable count using the useSelector hook and the actions is set to a variable dispatch using the useDispatch. There are three buttons: the increase button, decrease button, and increaseByAmount button. An onClick event was placed on each button which run the various action.

When these buttons are clicked, two things happens:

  • The Redux action is dispatched to the store.
  • The slice reducer will see the action and then update the state.

Here's the code that does all that:

//App.jsx
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment, incrementByAmount } from "./redux/countslice"

export default function App() {
  const count = useSelector((state) => state.counter.count)
  const dispatch = useDispatch()

  return (

      <div className='App'>
        <h1>The count is {count}</h1>
        <div className="button">
        <button
          onClick={() => dispatch(increment())}
        >
          Increase
        </button>
        <button
          onClick={() => dispatch(decrement())}
        >
          Decrease
        </button>
        <button onClick={()=>dispatch(incrementByAmount(10))} > Increase by 10</button>

        </div>

      </div>

  )
}

The Result

This is exactly what you should get when you run your code:

Image App Showing the function of Redux Toolkit

Conclusion

This tutorial walked you through how you can make use of Redux toolkit in handling your state in React. You learned how to create a store using various hooks such as the useSelector and useDispatch hook to read data from the store.

At this point you should be confident enough to use the Redux toolkit for managing state in your React app.

Let’s connect on Twitter and LinkedIn.

]]>