[Nextjs] Pivot 프로젝트

프로젝트 동기

nextjs를 사용해보고 싶기도 했고 해보고 싶은 것들을 다 때려박기로 했다.

---

프로젝트 주 기능

1.  SNS
2. MMS
3. 캘린더
4. 클라우드

사용해 보고싶은 것

• 카카오, 네이버등 로그인
• 결제 시스템 (기본기능 X)
• 그룹 채팅

---

Next.js 프로젝트 생성하기

Next.js 프로젝트 생성하기

- npx create-next-app pivot

 

타입스트립트 적용 시키기

- yarn add --dev typescript @types/react @types/node

import { AppProps } from 'next/app'
import Layout from './components/Layout'

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

export default MyApp

 

styled-components 적용시키시

 

- yarn add styled-components

 

※ nextjs에서는 styled-components 작동 오류가 있다.

  SSR문제로 처음 빌드시킨 styled-components 는 보이다가 실시간으로 고치려고하면 적용이 아예 안되는 현상이 나타난다.

 

문제 해결하기

- yarn add -D babel-plugin-styled-components

- .babelrc 파일을 최상단에 생성 후 다음 코드 추가

{
    "presets": ["next/babel"],
    "plugins": [["styled-components", { "ssr": true }]]
  }

된것 같은데.. 다른 사이트들 보니까 다른 _document.tsx를 만들어 코드를 넣던데, 지금은 간단한 코드라 오류가 안나는 건가

나중에 안되면 추가해보는 걸로