next.js 연습
프로젝트 준비를 위해 next.js를 공부하던 도중 여러가지 문제가 생겨 적어놓으려고 한다.
📌 1. src/app로 파일구조 세팅 시 폴더구조 방법
여러가지 서칭을 하다가 최종 공식문서를 보고 알게 되었다.
아래 사진처럼 src를 사용시 안에 app 폴더가 생기게 되는데, app 폴더 안에 페이지(router)가 될 폴더를 만들어주고 page.js (page.tsx)로 파일명을 통일해주면 라우팅이 된다.
export default function Page() {
return <h1>Hello, Dashboard Page!</h1>
}코드 내 구성 및 이름생성은 이런식으로 해주면 되는데, 나는 보통 화살표함수를 쓰기 때문에 저거와는 조금 달라질 예정이다.
📌 Link 오류
Link 안에 a 태그를 넣어놨더니 계속 아래와 같은 오류가 떴다.
구글링해서 알아보니 next.js 13버전 이후부터는 Link 태그 안에 a 태그를 넣지 않아야 정상 작동하며, 나처럼 a 태그가 필요할 시 반드시 legacyBehavior 를 Link 태그 안에 넣어줘야 작동된다고 한다.
<Link href="/project" legacyBehavior>
<a className="mr-5 hover:text-gray-900">Project</a>
</Link>📌 DarkMode 추가
next-themes+tailwindCSS를 활용해 다크모드를 추가해봤다.
1) 설치
npm install next-themes
yarn add next-themes나는 yarn을 보통 활용하기 때문에 두번째 코드로 설치했다.
2) tailwindCSS 연동
// tailwind.config.js
module.exports = {
darkMode: 'class', // 다크 모드를 클래스 기반으로 설정
content: [
'./app/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
plugins: [],
};tailwind.config.js에 들어가서 darkMode를 추가해 준다.
다크모드를 사용할 때 어떤 방식을 사용할지 설정하는 부분이라고 생각하면 된다.
class와 media 두 부분으로 나뉜다.
예를 들어 class로 설정할 경우, <html class="dark">를 입력해 주면 다크모드가 적용된다.
media로 설정할 경우, 사용자 시스템의 다크 모드 설정에 따라 자동으로 다크모드가 적용된다.
3) ThemeProvider 설정
// app/layout.tsx
import { ThemeProvider } from 'next-themes';
import '../styles/globals.css';
export const metadata = {
title: 'Next.js with next-themes',
description: 'A Next.js project with Tailwind CSS and dark mode using next-themes.',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<ThemeProvider attribute="class">
{children}
</ThemeProvider>
</body>
</html>
);
}그 후 app > layout 페이지로 이동한 후, ThemeProvider를 설정해 준다.
그리고 attribute="class"를 입력해 준다.
✨ 연습하면서 내용 추가 예정
