아 Next.js 뭐더라~ 분명히 썼었는데~
다시 쓴다~
쉽게 풀어 말하면
React는 라이브러리인데, Nextjs는 React 프레임워크다. 신기
여튼 그래서 Next.js의 룰을 사용해야한다.
# with npm
npx create-next-app@latest
page 폴더에 index.js를 생성하여 컴포넌트를 export default 시키면 자동으로 홈 화면이 된다.
왜? 프레임워크니까~ 이런게 자동으로 세팅이 되어있는 거다.
그렇기 때문에 프레임워크 사용자는 그 규칙을 따라야 하는 거고
.jsx
자가 아닌 js
에서도 react를 import 하지 않아도 jsx를 쓸수 있음<a>
를 이용해 페이지를 이동을 하면 페이지가 리로드 된다.
그럼 React에서 SPA(Single-page application)의 장점이 사라지기 때문에 React Router의 Link
를 사용했어야 했다.
같은 이유로 Next.js에서도 <a>
를 이용하지 않고 페이지 네비게이트 시, Link
컴포넌트를 사용한다.
import Link from 'next/link';
<Link href="/">home</Link>
현 url에 따라 class or css 적용하기
import { useRouter } from 'next/router';
const router = useRouter();
<Link href="/" style={{ color: router.pathname === '/' ? 'red' : 'blue' }}>
home
</Link>
Next.js에서는 CSS-Module을 사용하거나 style jsx
를 사용한다.
<style jsx>
{`
a{color: coarl}
`}
</style>
<style jsx global>{``}</style>
React에서의 중첩 라우팅을 하고 싶다면 page 폴더에 _app.js
를 만들어 추가하면 된다.
그럼 page 폴더 내에 있는 모든 js를 랜더링 하기 전 _app.js
를 랜더링 하게 되어 중접 라우팅을 할 수 있다.
_app.js
의 컴포넌트는 Component, pageProps 두개의 Prop을 갖는다.파일명.module.css
파일 형태를 제외한 모든 나머지 css파일들은 _app.js
에서만 import해와서 사용해야 한다.import '@/styles/globals.css';
export default function App({Component, pageProps}) {
return
<>
<Component {...pageProps} />
<style jsx global>
{`
a {
color: darkseagreen;
text-decoration: none;
}
`}
</style>
</>;
}