Next.js
pages/_app.tsx
import 'styles/globals.css'
import type { AppProps } from 'next/app'
interface Props {}
interface State {}
function MyApp({ Component, pageProps }: AppProps<Props>) {
return <Component {...pageProps} />
}
export default MyApp
pages/_document.tsx
import Document, { Html, Head, Main, NextScript } from 'next/document'
import type { DocumentContext } from 'next/document'
import { Children } from 'react'
export default class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await Document.getInitialProps(ctx)
return {
...initialProps,
styles: Children.toArray(initialProps.styles)
}
}
render() {
return (
<Html lang="ko" dir="ltr">
<Head>
<meta charSet="utf-8" />
<meta name="theme-color" content="#000" />
<meta name="robots" content="index, follow" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="favicons/apple-icon-180x180.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="favicons/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="favicons/favicon-16x16.png"
/>
<link rel="manifest" href="/manifest.json" />
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
/>
<meta name="msapplication-TileColor" content="#000" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
pages/_error.tsx
import type { NextPage } from 'next'
import type { ErrorProps } from 'next/error'
import NextErrorComponent from 'next/error'
const CustomErrorComponent: NextPage<ErrorProps> = (props) => {
return <NextErrorComponent statusCode={props.statusCode} />
}
CustomErrorComponent.getInitialProps = async (contextData) => {
return NextErrorComponent.getInitialProps(contextData)
}
export default CustomErrorComponent