📥 Next.js 절대 경로
tsconfig.json
{
"compilerOptions": {
// ... 나머지 생략
// 아래 두개 추가 ( @src 외 원하는 폴더 추가하면 됨 )
"baseUrl": ".",
"paths": {
"@src/*": ["src/*"]
}
}
}next.config.js
const path = require("path");
/** @type {import('next').NextConfig} */
module.exports = {
reactStrictMode: true,
// 아래 구문 추가 ( 아마도 webpack에서 번들링 할 때 경로를 인식할 수 있게 해주는 부분 )
webpack(config) {
return {
...config,
resolve: {
...config.resolve,
alias: {
...config.resolve.alias,
"@src": path.resolve(__dirname, "src"),
},
},
};
},
};🧹 styled-components reset css
아래 코드를 그대로 작성하고 <GlobalStyles />를 _app.tsx에서 넣어주기만 하면 됩니다.
npm i styled-components
npm i -D @types/styled-components
npm i styled-reset- 코드 예시
import { createGlobalStyle } from "styled-components";
import reset from "styled-reset";
const GlobalStyles = createGlobalStyle`
${reset}
* {
box-sizing: border-box;
}
body {
font-family: "Jua", sans-serif;
}
a {
text-decoration: none;
color: inherit;
}
input, textarea {
-moz-user-select: auto;
-webkit-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
input:focus {
outline: none;
}
button {
border: none;
background: none;
padding: 0;
cursor: pointer;
}
`;
export default GlobalStyles;🐺 Next.js + styled-components + TypeScript 적용법
-
설치
npm i babel-plugin-styled-components.babelrc
{
"presets": ["next/babel"],
"plugins": ["styled-components"]
}_document.tsx
import Document, { DocumentContext, DocumentInitialProps } from 'next/document'
import { ServerStyleSheet } from 'styled-components'
export default class MyDocument extends Document {
static async getInitialProps(
ctx: DocumentContext
): Promise<DocumentInitialProps> {
const sheet = new ServerStyleSheet()
const originalRenderPage = ctx.renderPage
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
})
const initialProps = await Document.getInitialProps(ctx)
return {
...initialProps,
styles: [
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>,
],
}
} finally {
sheet.seal()
}
}
// 아래 부분은 필요 시 추가
render() {
return (
<Html lang="ko">
<Head>
{/* 페비콘 */}
<link rel="shortcut icon" href="/fav1.ico" />
{/* SEO */}
<meta name="keyword" content="blegram, 인스타그램 클론 코딩" />
{/* 작성자 */}
<meta name="author" content="1-blue" />
{/* 문자 */}
<meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
{/* 구글 폰트 */}
<link
href="https://fonts.googleapis.com/css2?family=Jua&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}🏁 styled-components theme 적용법
아래 코드를 적용하고 나면 color: ${({ theme }) => theme.color.dark}; 처럼 사용이 가능하며 자동완성이 지원됩니다.
-
src/styles/theme.ts
const color = {
white: "#F8F9FA",
dark: "#121212",
};
// styled-components.d.ts에서 등록할 타입
export type Color = typeof color;
export default color;src/styled-components.d.ts
import "styled-components";
import { Color } from "@src/styles/theme";
declare module "styled-components" {
export interface DefaultTheme {
color: Color;
}
}
...