nextjs 14에서 동적으로 title이나 favicon을 관리하기 위해서 가장 최상위에 config 폴더를 만들고 site.ts 파일을 만들어서 정보를 등록합니다. /config/site.ts 동적으로 설정하는 아이콘이 파비콘으로 나오게 하려면 /app 폴더 안에 favicon.ico파일이 없어야 합니다. favicon.ico 파일을 삭제해주세요. 설정한 site.ts 내용을 layout.tsx 에서 설정하세요. /app/layout.tsx 다크모드인 경우와 아닌 경우 다른 아이콘이 보이도록 설정 할 수 있습니다.
상단 Navbar 만들기 위해서 components 아래 navbar.tsx 를 생성 합니다. _를 사용하여 페이지로 인식하지 않도록 합니다. /app/(marketing)/_components/navbar.tsx 이 Navbar 콤포넌트를 layout.tsx 에서 불러와 사용합니다. /app/(marketing)/layout.tsx 이제 화면을 보면서 Navbar를 만들어 갈 수 있어요. 이제 왼쪽 상단에 로고를 표현하기 위해 로고 콤포넌트를 생성 합니다. 로고는 다른 페이지에서도 사용 할 수 있어서 /components/logo.tsx 에 생성 합니다. 로고 … Read more
nextjs 초기 프로젝트 설정에서 shadcn 초기화 했었는데요. 이제 버튼과 같은 컴포넌트 추가해서 사용할 수 있습니다. components 폴더에 button이 생겨 있을 것입니다. 이제 사용하기만 하면 됩니다. Button Components 를 사용하여 링크로 연결하는 예제입니다.
온라인에서 폰트 사용하는 경우 woff2 확장자를 사용 할 수 있습니다. woff2 확장자 폰트를 구했다면 public/fonts 폴더로 이동 시켜서 사용 할 수 있습니다. nextjs 있는 next/font/local에서 import 할 수 있어요. shadcn을 이용해서 cn 함수 이용해서 폰트 사용 할 수 있어요. 구글 폰트를 이용할 수도 있어요. 먼저 선언하는 부분입니다. 역시 cn 함수를 이용해서 폰트를 사용 할 수 … Read more
nextjs 기본 구조를 만들고 나서 폴더를 만들어서 작업해봅시다. 용도에 따라서 구분해서 작업 하고 싶은 경우가 있을 수 있고 특정 페이지에 따른 테마를 구분 할 수도 있을텐데요. 그럴때 괄호를 사용 할 수 있어요. /app/page.tsx 파일이 기본으로 있는데 이 파일을 지우고 (marketing) 폴더를 만들어서 page.tsx 파일을 넣어도 동작 합니다. 괄호를 이용해서 여러 페이지를 구분하고 나누고 레이아웃을 그 … Read more
2023년 말 시점으로는 이 방법이 14설치 방법이지만 시간이 지나면 다른 버전이 설치 될 수 있습니다. nvm 으로 node 버전 관리하고 있는데 요즘에는 node 20이 최신 LTS 버전이라고 해서 일단 nvm use v20으로 셋팅하고 진행했습니다. npx 명령어를 이용해서 구성합니다. 명령어 실행하고 나면 이것저것 물어보는데요. 대부분 기본값으로 하고 src 디렉토리 부분과 import alias 부분만 No로 합니다. trello-app … Read more