# _app.jsx in Next.js

In a Next.js project, the _app.jsx (or _app.tsx if using TypeScript) file is used to customize the default App component, which controls how pages are initialized. The purpose of this file is to allow you to set up shared layout components, context providers, global CSS, and other configurations that should be consistent across every page in the app. See the blog What is the purpose of the _app.js and _document.js files in a Next.js application? (opens new window) for more information.

Here's a breakdown of its common uses:

Persisting Layouts: If you want a consistent layout or components (like a navbar or footer) across all pages, you can add them to _app.jsx so they appear on every page without needing to repeat code in each individual page component.
Global State Management: If your app requires global state (e.g., with Redux, Zustand, or the React Context API), you can wrap the entire app with a provider in _app.jsx, making state accessible across all pages.
Adding Global CSS: Next.js only allows global CSS imports in _app.jsx (or custom _document.jsx). This means you can import any CSS files that you want applied throughout the entire app here.
Custom Page Transitions: If you need custom page transitions, you can manage them by using the Component and pageProps props provided by Next.js in the _app.jsx file. This can help create smooth transitions or animations between different pages.

Here’s an example of a basic _app.jsx file:

import '../styles/globals.css'; // Importing global CSS
import { ThemeProvider } from 'styled-components'; // Example of a context provider

const theme = {
  colors: {
    primary: '#0070f3',
  },
};

export default function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

In this example:

globals.css is imported to apply global styles.
The app is wrapped in a ThemeProvider to provide a theme to all pages.
The Component prop refers to the page being rendered, and pageProps holds any props passed to that page.