next js와 styled-jsx를 사용해 보았습니다.

최근 nextjs를 사용할 기회가 있었고, 구축 주위를 하지 않았기 때문에, 공부를 위해 nextjs의 구축과 styled-jsx의 사용법을 조금 조사해 보았습니다.

nextjs 구축

nextjs의 구축에 있어서, nextjs의 튜토리얼이 있었으므로 참고에 해 보았습니다.
htps // // 네 xtjs. 오 rg / ぇ r rn / bash cs / c rete-ne xtjs - p / 세츠 p

React 앱 준비

npm init next-app 任意のプロジェクト名 --example "https://github.com/zeit/next-learn-starter/tree/master/learn-starter"

npm init next-app 모든 프로젝트 이름으로 nextjs 앱을 만들 수 있습니다.
--example을 붙이면 지정한 템플릿을 사용할 수 있는 것 같습니다.

만든 디렉토리로 이동하여

npm run dev

을 실행하면 아래와 같은 화면이 표시될까 생각합니다.



이런 식으로 nextjs 앱이 바로 시작됩니다.
이제 nextjs를 공부하는 초보의 초보를 준비했습니다.

그건 그렇고,이 페이지는
프로젝트 이름/pages/index.js가 표시되므로
시험에 문언 등을 바꾸어 보면 갱신된다고 생각합니다.

에디터를 저장해 브라우저를 확인하러 가면 리로드를 하지 않아도 내용이 바뀌고 있을까 생각합니다.
(왜 리로드하지 않아도 내용이 바뀌는지는 또 다른 기회에 알아보고 싶습니다.

styled-jsx

위의 방법으로 nextjs를 도입 할 수있었습니다.
거의 아무것도 하지 않았기 때문에, 디폴트로 도입되고 있는 styled-jsx에 대해서 어떤 글을 작성할 수 있는지 조금 조사해 보았습니다.

styled-jsx는 다음과 같이 사용할 수 있습니다.

export default function Home() {
  return (
    <div>
      <p>サンプルテキスト</p>

      <style jsx>{`
        p {
          color: red;
        }
      `}</style>
    </div>
  )
}

기본적으로는 이러한 형태로 기술을 할 수 있습니다.
또한이 <style jsx>에 정의 된 CSS는이 파일에만 적용됩니다.
다른 파일, 컴퍼넌트간에 문제가 일어나는 일은 적을까 생각합니다.

글로벌 선언

반대로 global css를 선언하고 싶은 경우는 다음과 같이 하면 실현할 수 있습니다.

export default function Home() {
  return (
    <div>
      <p>サンプルテキスト</p>

      <style jsx global>{`
        p {
          line-height: 1.5;
        }
      `}</style>
    </div>
  )
}

<style jsx global> 그렇다면이 구성 요소 의외로 적용 할 수 있으므로 잘 사용하면
사용하기 쉽습니다.

수업

클래스 이름을 지정하려면

export default function Home() {
  return (
    <div>
      <p className="sampleText">サンプルテキスト</p>

      <style jsx global>{`
        .sampleText {
          line-height: 1.5;
        }
      `}</style>
    </div>
  )
}

그렇다면 보통 CSS와 같은 감각으로 사용할 수 있네요.

이런 식으로 nextjs를 만질 준비가 되었기 때문에 더 만져 가고 싶습니다.
css 주변에서 그 밖에도 styled-components나 CSS Modules나 emotion 등 여러가지 있는 것 같아서 만져보고 싶습니다.

끝