이전에 알아본 Next.js의 컨벤션을 참고하여 프로젝트의 초기 세팅을 진행해보았다.
1. 페이지 구성
app > projects > page.tsx
2. 다이나믹 페이지 생성
app > projects > [id] > page.tsx
- [id] 형식으로 적으면 projects/id 의 형식으로 동적 라우팅이 가능하다
3. 전체 레이아웃 구성
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>
<Header />
<div className="flex flex-col w-full">
<div className="flex w-[1440px] h-[90vh] my-0 mx-auto ">
{children}
</div>
</div>
<Footer />
</body>
</html>
);
}4. prettier 설정
(1) 설치: yarn add prettier -d
(2) .prettierrc 파일 구성
{
"semi": false,
"singleQuote": false,
"trailingComma": "all",
"useTabs": false,
"tabWidth": 2,
"printWidth": 80,
"arrowParens": "always"
}
(3) pakage.json 설정
"scripts": {
...
"format": "prettier --check --ignore-path .gitignore .",
"format:fix": "prettier --write --ignore-path .gitignore ."
},5. 글로벌 스타일 설정
// global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
html,
body {
padding: 0;
margin: 0;
font-family:
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Oxygen,
Ubuntu,
Cantarell,
Fira Sans,
Droid Sans,
Helvetica Neue,
sans-serif;
line-height: 1.6;
font-size: 18px;
}
* {
box-sizing: border-box;
}
a {
color: #222;
text-decoration: none;
}
button {
cursor: pointer;
}
