이 보일러플레이트는 Next.js 12.1 기반으로 구축되어 있으며, 추후 Next.js 업데이트시 latest 버전을 상시적으로 따라갑니다.
이 보일러플레이트에 포함된 상세 내역
- Next.js Based
- Tailwind CSS
- word-break: keep-all 커스텀 Tailwind 클래스 적용 (KO)
- text-shadow 커스텀 Tailwind 클래스 적용
- iframe tag 16:9 ratio 적용
- body tag overscroll-behavior-y:contain 적용 (position sticky 대응)
- 모든 엘리먼트 box-sizing:border-box 세팅
- Sass 세팅
- PostCSS
- CSS 브라우저별 AutoPrefixer 적용
- cssnano 적용
- jsconfig.json 세팅
- graphql-client 세팅
- Components, Layout, Page Split
- SVG 파일 Webpack 포함
- SWC 컴파일러 minify 적용
- 일부 Response Header 제거
- 기본 SEO 세팅 (Meta tag 등)
- build시 기본 sitemap 자동생성 (next-sitemap)
root 디렉토리에서 env.boilerplate 파일을 env.local 로 복사하여 사용
$ cp env.boilerplate env.local
#웹사이트 이름
APP_WEBSITE_NAME=
#웹사이트 Public 주소
APP_WEBISTE_URL=
#graphql endpoint 주소
APP_WEBSITE_GRAPHQL_URL=
이 보일러플레이트는 별도의 jsconfig.json 파일을 사용함
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"a/*": ["assets/*"],
"c/*": ["components/*"],
"s/*": ["styles/*"],
"l/*": ["layout"]
}
}
}
개발상황에 맞게 paths는 수정가능
/* import Component from '../components/Component'와 동일 */
import Component from 'c/Component'