next.js 13

13 버전에서 12버전보다 매우 많은 변화가 있었다.

따라서 이 변화를 알아보면서, next.js 13버전을 사용해서 프로젝트를 만들어보자.

next 만들기

공식 페이지를 들어가면 설치 커멘드를 찾아볼수 있다.

npx create-next-app@latest

next 최신 버전으로 설치할겁니다. 라는 뜻으로, 입력하면

• 프로젝트 이름
• tailwindcss 쓸건지 질문
• eslint 적용할건지 질문
• 그밖에 폴더 경로 질문
  을 거쳐서 프로젝트가 생성된다.

내 경우에서는 해당 코드가 오류가 났었는데, next/font를 설치하지 않아서 발생한 오류라고 한다 (아니 설치 할때 이런거는 기본적으로 같이 설치해주는거 아닌가?)

npm install @next/font

이렇게 설치해주면 해결될 것이다.

이제 npm run dev 해주면 기본 화면이 뜰 것이다.

src/app 에 있는 page.tsx의 내용을 바꿔주면 페이지가 바뀔 것이다.

기본으로 제공된 코드에서 main 태그 내용을 전부 지우고 자유롭게 작성해보자.

tailwindcss

Utility-First 컨셉을 가진 CSS 프레임워크다. 부트스트랩과 비슷하게 m-1, flex와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있다.

html 코드 내부에서 class의 이름을 일련의 키워드로 작성하면 해당 키워드에 해당하는 스타일 속성이 적용된다.

tailwindCss 쓸거냐고 물어봤을때 yes라고 선택하면 기본적으로 tailwindcss, postcss, autoprifixer를 설치해준다. 여기서 tailwind.config.js에서 content 항목에는

어떤 경로에 tailwindcss를 적용할것인가?

를 설정하는 코드이다.

기본적으로 설치되었을때는

 content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],

요로케 작성되어있는데, "src에서 pages,components,app 이하의 모든 파일에 적용할 것이다" 라는 뜻이다.

 <main className="flex min-h-screen flex-col items-center justify-between p-24 text-blue-500">
    <h1>안녕? 고생길이 훤하구나!!!</h1>
    </main>

이제 이런식으로 className에다가 tailwindcss 코드를 작성하면 스타일 속성이 적용된다!

그리고 theme 항목에서는 extend를 사용해어 스타일의 속성을 커스터마이징 할수있다. 예를 들어서 tailwindcss 에서 제공하는 폰트 사이즈 코드가 제공하는 크기를변경하고 싶다면?

theme: {
    extend: {
      fontSize: {
        '2xsm': '10px',
        xsm: '12px',
        sm: '13px',
        reg: '15px',
        lg: '18px',
        '2xl': '22px',
        '3xl': '25px',
        '4xl': '32px',
        '5xl': '40px',
        '6xl': '50px',
        '7xl': '70px',
      },
    },
  },

요렇게 폰트별로 크기를 지정할수 있다.

예를들어서 아까 작성한 코드의 클래스 이름에다가 text-7xl을 추가하면?

요렇게 폰트 크기가 적용된다!