CRN with-styled-components
next.js 깃허브를 참조하여 with-styled-components-babel 예시로 시작한다.
CNA로 설치하여도 매우 라이트하게 잘 구성되어 있는 것을 볼 수 있다.
yarn create next-app --example with-styled-components-babel with-styled-components-babel-app
해당 예제에 '리덕스-툴킷', eslint, prettier를 설정하여 아래와 같이 package.json이 만들어졌다.
{
"private": true,
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"@reduxjs/toolkit": "^1.3.6",
"next": "^13.1.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.5",
"redux-devtools-extension": "^2.13.9",
"styled-components": "^5.3.6"
},
"devDependencies": {
"@types/node": "^18.11.18",
"@types/react": "^18.0.26",
"@types/react-dom": "18.0.10",
"@types/react-redux": "^7.1.25",
"@types/styled-components": "^5.1.26",
"eslint": "^8.32.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-config-next": "13.1.1",
"eslint-config-prettier": "^8.6.0",
"typescript": "4.9.4"
},
"eslintConfig": {
"extends": [
"next/core-web-vitals",
"airbnb",
"airbnb-typescript",
"prettier"
]
}
}.prettierrc는 아래와 같이 만들어준다.
벨로퍼트님 기본 설정에 eol을 lf로 통일시켰다.
{
"singleQuote": false,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"endOfLine": "lf"
}CSS 초기화, 기본 폰트 설정
지난 번에 작성했던 글을 참고하여 설정해주었다.
지난번 글과 달라진 점은 웹폰트를 적용하는 Head 태그를 index.tsx에 아래와 같이 추가했다는 점이다.
Head태그는 자동으로 합쳐지기에 index.tsx에 작성하면 다른 페이지에서도 적용된다고 한다. (지난번 작성했던 글(_document.tsx의 render함수에서 작성하는 방식)은 레이아웃이 깨지는 문제가 있었다.)
export default function Home() {
return (
<Container>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/nanumsquare.css"
/>
<link rel="icon" href="/favicon.ico" />
</Head>
<Main>
<Title>
Welcome to <a href="https://nextjs.org">Next.js!</a>
</Title>
<Description>
Get started by editing
<CodeTag>pages/index.tsx</CodeTag>
</Description>
<Cards />
</Main>
</Container>
);
}
기존 글꼴
스타일 적용 후 글꼴
Head파일 작성하기
기존에 Head를 작성했을 때 CSS가 적용되지 않는 문제가 있었는데,
https://im-designloper.tistory.com/108 글을 보고 깨달았다.
next/document파일의 Head와 next/head는 다르다. 지금껏 document파일에 next/head를 임포트하고 있었다.
아래와 같이 수정하자 제대로 작동하는 것을 확인할 수 있었다.
import Document, {
DocumentContext,
Html,
Main,
NextScript,
Head,
} from "next/document";
//...
} finally {
sheet.seal();
}
}
render() {
return (
<Html>
<Head>
<meta name="description" content="Generated by create next app" />
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/nanumsquare.css"
/>
<link rel="icon" href="/favicon.ico" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}head/document에는 title을 작성할 수 없다.
_app.tsx에 next/head 파일을 임포트하여 추가로 헤드를 만들어주자.
import Head from "next/head";
function App({ Component, pageProps }: AppProps) {
const { store, props } = wrapper.useWrappedStore(pageProps);
return (
<Provider store={store}>
<Head>
<title>Create Next App</title>
</Head>
</Provider>