Next + Typescript (2) 기본 컴포넌트 타이핑

_app.tsx

AppProps만 넣어주면 된다.

참고 ) nextjs.org/docs/basic-features/typescript#custom-app

// import App from "next/app";
import type { AppProps /*, AppContext */ } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

// Only uncomment this method if you have blocking data requirements for
// every single page in your application. This disables the ability to
// perform automatic static optimization, causing every page in your app to
// be server-side rendered.
//
// MyApp.getInitialProps = async (appContext: AppContext) => {
//   // calls page's `getInitialProps` and fills `appProps.pageProps`
//   const appProps = await App.getInitialProps(appContext);

//   return { ...appProps }
// }

export default MyApp

 

SSR 관련 함수들

필요에 따라 넣으면 된다.

import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next'

export const getStaticProps: GetStaticProps = async (context) => {
  // ...
}

export const getStaticPaths: GetStaticPaths = async () => {
  // ...
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  // ...
}

 

styled-components SSR (_document.tsx)

interface IProps {
  styleTags: Array<React.ReactElement<{}>>;
}

export default class MyDocument extends Document<IProps> {
  ... 중략

 

styled-components 

props에 들어있는 걸 제네릭으로 타이핑해주면 된다.

참고)

velog.io/@hwang-eunji/styled-component-typescript

blog.agney.dev/styled-components-&-typescript/

const Container = styled.div<{ age : number } >`
  color: ${(props) => (props.age > 20 ? 'red' : 'gray')};
`;

const Container = styled.div<Container>`
  color: ${(props) => (props.age > 20 ? 'red' : 'gray')};
  background-color: ${(props) => (props.isActive ? 'red' : 'gray')};
`;