반응형 Next.js17 React Bootstrap in Next.js - Navbar 링크, 정렬,클래스명 위 페이지에서 사용하고 있는 Navbar는 ReactBootstrap에서 가져온걸 사용중이다. 다만 여기서 문제가 발생했다. 1. Nav.Link를 그대로 사용하면 페이지는 이동하지만 새로고침 하게된다. Next.js에서는 SPA방식으로 동작하려면 Link를 사용해 줘야한다. 그래서 이와같이 해결해 주었다. import Link from "next/link"; 키워드검색 이와같이 Nav.Link속성은 라면검색 이와같이 링크가 들어있는데 아래 방식으로 사용하면 SPA방식을 사용할 수 없다. 그래서 href속성을 지워주고 Nav안에서 반응형에도 동작하기위해 남겨두고 안에서 Link를 사용해 주었다. 그리고 Next.js에서 사용하는 방법인 a태그내에서 className을줘 스타일을 지정해 주었다. a태그이기.. 2022. 3. 18. you must wrap your application in an <SSRProvider> 오류 (SSRProvider) npm run dev로 Next.js프로젝트 진행중 위와같은 알림이 떴다. 관련하여 검색을해보니 부트스트랩을 가져와 사용중인데, SSR관련해서 컴포넌트를 감싸줘서 사용해야 하는 이슈가 있었다. React는 CSR이니 상관없는데 Next.js는 신경써줘야 하는것 같다. 당장 작동은 되지만 추후 어떤 문제가 있을지 모르기 때문에 방법대로 해결 하기로 결정 https://react-bootstrap.github.io/getting-started/server-side-rendering/ React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io Server-side Rendering React-.. 2022. 3. 18. Next.js 에서 Mui사용하기 간단한 Grid시스템은 Bootstrap을 사용하는데 전체적인 내브바부터 여러 필요한 디자인 컴포넌트들을 Mui로 구성하기로 했다. React와 사용방법은 거의비슷하다. https://mui.com/getting-started/installation/ Installation - MUI Install MUI, the world's most popular React UI framework. mui.com npm To install and save in your package.json dependencies, run: // with npm npm install @mui/material @emotion/react @emotion/styled // with yarn yarn add @mui/material @em.. 2022. 3. 17. Next.js에 Script 태그 사용하기 https://nextjs.org/docs/basic-features/script Basic Features: Handling Scripts | Next.js Next.js helps you optimize loading third-party scripts with the built-in next/script component. nextjs.org import Script from 'next/script' export default function Home() { return ( ) } 특정 js파일을 Script태그를 이용해서 사용해야할때 참고하자 Mui를 마주치면서 쓸 일이 생겼다. 2022. 3. 17. Next.js 에 React Bootstrap 설치하기 React에 적용하는 방법이랑 똑같다 근데 명확하게 정리를 안해놔서 휴..! 다시 적어보도록하자. https://react-bootstrap.github.io/getting-started/introduction React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io 이곳에들어가면 자세한 설명이 있지만 npm install react-bootstrap bootstrap@5.1.3 이와같이 프로젝트 안에서 설치해준다. {/* The following line can be included in your src/index.js or App.js file*/} import 'bootstrap/.. 2022. 3. 17. 이전 1 2 3 다음 반응형
