ReasonJun

Next.js : Custom App / Document / Error page 본문

Frontend/Next.js

Next.js : Custom App / Document / Error page

ReasonJun 2023. 6. 21. 01:33
728x90

Custom App

Next.js uses the App component to initialize pages. You can override it and control the page initialization and:

  • Persist layouts between page changes
  • Keeping state when navigating pages
  • Inject additional data into pages
  • Add global CSS
import '@/styles/globals.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

 

https://nextjs.org/docs/pages/building-your-application/routing/custom-app

 

Routing: Custom App | Next.js

Using Pages Router Features available in /pages

nextjs.org

 

Custom Document

A custom Document in Next.js is a way to override the default Document component. This can be useful for adding custom HTML, CSS, or JavaScript to the <html>, <head>, and <body> tags of all pages.

To create a custom Document, you need to create a file called _document.js in the pages directory. This file should contain a component that extends the Document component.

For example, the following code would create a custom Document that adds a custom title to all pages:

import Document, { Head, Main, NextScript } from "next/document";

const MyDocument = () => (
  <Document>
    <Head>
      <title>My Custom Title</title>
    </Head>
    <Main />
    <NextScript />
  </Document>
);

export default MyDocument;

The MyDocument component can be used to add any custom HTML, CSS, or JavaScript to the <html>, <head>, and <body> tags of all pages. For example, you could use the MyDocument component to add a custom favicon or to change the default font.

Custom Documents can be a great way to add custom branding or to make sure that all of your pages have a consistent look and feel. However, it is important to note that custom Documents can break if you change the Next.js core code.

Here are some of the benefits of using a custom Document in Next.js:

  • Custom branding: Custom Documents can be used to add custom branding to your Next.js application, such as a custom title or favicon.
  • Consistent look and feel: Custom Documents can be used to ensure that all of your pages have a consistent look and feel.
  • Flexibility: Custom Documents can be used to customize the behavior of the Next.js application in any way that you want.
  • Control: Custom Documents give you complete control over the way that your Next.js application works.

If you are looking for a way to add custom branding or to make sure that all of your pages have a consistent look and feel, then you should consider using a custom Document.

 

 

https://nextjs.org/docs/pages/building-your-application/routing/custom-document

 

Routing: Custom Document | Next.js

Using Pages Router Features available in /pages

nextjs.org

 

404 Page

https://nextjs.org/docs/pages/building-your-application/routing/custom-error#404-page

 

Routing: Custom Errors | Next.js

Using Pages Router Features available in /pages

nextjs.org

 

728x90
저작자표시

'Frontend > Next.js' 카테고리의 다른 글

Next.js : Error Handling  (0) 2023.06.21
Next.js : Measuring performance (webVitalsAttribution)  (0) 2023.06.21
Next.js : Absolute Imports and Module Path Aliases  (0) 2023.06.21
Next.js : Automatic Static Optimization (ASO)  (0) 2023.06.20
Next.js : Dynamic Import (Lazy Loading)  (0) 2023.06.20
'Frontend/Next.js' Related Articles more
Comments