[ Develop 공유사항 ]

[Happhee]

💚 어떤 기능인가요?

페이지 이동 방법입니다!!

📁 현재 폴더 구조

1️⃣ _document.tsx

👉 건들지 마세요! meta tag를 정의하는 곳이고 어떠한 hooks도 사용 불가능합니다

2️⃣ _app.tsx

👉 모든 페이지 컴포넌트를 감싸고 있는 공통 레이아웃입니다!

<RecoilRoot>
      <ThemeProvider theme={theme}>
        <Global styles={resetStyle} />
        <Global styles={GlobalStyle} />
        <Header />                                                 // ✅ 헤더 고정여기!!
        <Component {...pageProps} />               //   ✅  index.tsx 보여지는 곳
      </ThemeProvider>
 </RecoilRoot>

3️⃣ index.tsx

👉 버튼 클릭으로 main, toyView, community로 이동합니다.

import styled from '@emotion/styled';
import { useRouter } from 'next/router';
export default function index() {
  const router = useRouter();                       // ✅ next에서의 router이동 

  return (
    <StIndexWrapper>
      <StBtn type="button" onClick={() => router.push('/main')}>
        메인으로
      </StBtn>
      <StBtn type="button" onClick={() => router.push('/toyView')}>
        상품보기로
      </StBtn>

      <StBtn type="button" onClick={() => router.push('/community')}>
        커뮤니티로
      </StBtn>
    </StIndexWrapper>
  );
}

const StIndexWrapper = styled.main`
  heigth: 100%;
`;

const StBtn = styled.button`
  padding: 2rem;
`;

next에서의 router 사용법 : 공식문서 에서도 보면 알 수 있듯이 router.push(url)로 이동합니다✨

4️⃣ main, toyView, community.tsx

👉 페이지 이동으로 보여지는 곳입니다! 구분하기 편하게 <div>메인입니다</div> 식으로 써놓았으니 참고해주세용💚

---

모르는거 있으면 바로바로 물어보기🙋‍♀️ 오늘도 화이팅이야 웹노리들💚💚💚💚💚💚

[joohaem]

링크 이동은 next js 에서 제공하는 Link 태그가 더 SEO에 최적화된다고 알고 있습니다 !!
router를 사용하는 다른 이유가 있을까 궁금합니다!

[Happhee]

그것을 놓쳣습니댜,,,,!router만 생각해써용,,