Customize the dom and shape the incoming data
Next.js uses the App component to initialize pages. It can be overridden to control the page initialization. Which allows you to do amazing things like:
Persisting layout between page changes
Keeping state when navigating pages
Custom error handling using componentDidCatch
Inject additional data into pages
Add global CSS
Find this component in Rack & Pinion by navigating to /apps/web/src/pages/_app.js
💡 Hotkey tip:
Remember using ⌘ + p in VS Code will allow you to quickly search files across the whole project
Our custom app component takes the 2 stardard Next.js app component props. Component and pageProps.
The Component prop is the active page, so whenever you navigate between routes, Component will change to the new page. Therefore, any props sent to Component will be received by the page.
pageProps defaults to an empty object shaped like props that were fetched using one of Next.js data fetching methods. These props house all of our data coming in from the CMS.
Our custom app component leverages 4 custom functions upon initialization.
globalStyles();
useGoogleTagManager();
useResizeEnd();
useFocusOutlineOnTab();
globalStyles() - This function leverages the stitches globalCss function to inject things like global resets into our stylesheet.
useGoogleTagManager() - This is a hook that relies on useEffect and listens for route changes via next router. The google tag manager script is run elsewhere in the application so we are pushing a pageview event to the window each time the user visits a new route.
useResizeEnd() - This is a hook that creates a custom event to listen to the window size updates. We use a custom hook for this so we can improve performance by only listening for resize updates every 150ms. The event created in this hook is used in the useEvalBreakpoint hook
useFocusOutlineOnTab() - This custom hook adds a class to the document body when the user tabs
This is the NextJS custom document component. The custom Document can update the <html> and <body> tags used to render a Page. This file is only rendered on the server, so event handlers like onClick cannot be used in _document.
In this component not much has been customized. You will notice however that any custom 3rd party font stylesheets are being imported here. Additionally our stitches stylesheets are also all injected into the page here.