NextJs
-
App RouterNextJs 2023. 6. 28. 13:14
App Router Pages Router, App Router 예약된 파일명 layout 세그먼트 및 해당 하위에 대한 공유 UI page 경로의 고유한 UI 및 공개적으로 접근 가능한 경로 만들기 loading 세그먼트 및 해당 하위에 대한 UI 로드 not-found 세그먼트 및 해당 하위에 대한 UI를 찾을 수 없음 error 세그먼트 및 해당 하위에 대한 오류 UI global-error 전역 오류 UI route 서버 측 API 끝점 template 전문적으로 다시 렌더링된 레이아웃 UI default 병렬 경로 에 대한 폴백 UI 구성 요소 계층 React 구성 요소는 예약된 파일 요소를 계층 구조로 렌더링한다. layout.js template.js error.js(반응 오류 경계) loa..
-
Pages Router, App RouterNextJs 2023. 6. 28. 12:45
Next.js 13 이전에는 Pages Router가 Next.js에서 경로를 만드는 주요 방법이었다(파일 시스템 구조를 라우터 구조로 사용). Pages Router는 최신 버전의 Next.js에서 계속 지원되지만 React의 최신 기능을 활용하려면 새 App Router로 마이그레이션하는 것이 좋다. pages/api/*는 그대로 남아 있다.? 마이그레이션, pages와 app가 공존 가능하다. 그래서 작은 단계로 나누어 이러한 업데이트의 결합된 복잡성을 줄이는 것이 좋다. 앱 라우터는 페이지 라우터보다 우선 순위가 높다. 디렉터리 간 경로는 동일한 URL 경로로 확인되어서는 안 되며 충돌을 방지하기 위해 빌드 시 오류가 발생한다. Pages Router Pages Router https://next..
-
Nextjs Bootstrap 적용하기NextJs 2023. 1. 22. 19:30
사전준비 Nextjs 설치 Bootstrap 설치하기 CSS적용 pages/_app.tsx 파일에 css적용 하나만 추가하면 된다. import "bootstrap/dist/css/bootstrap.min.css"; 최상단에 추가한다. import "bootstrap/dist/css/bootstrap.min.css"; import '../styles/globals.css' //... JS적용 "bootstrap/dist/js/bootstrap.bundle.min.js" 을 사용하면 되지만 경우에 따라서 document찾기 문제가 발생한다. 아래 내용 참고 document찾기 문제 방지 export default function App({ Component, pageProps }: AppProps) { u..
-
Nextjs useEffectNextJs 2023. 1. 20. 09:13
첫 작동시기 클라이언트의 webbrowser등에 진입한 후 호출 된다. 그러므로 window, document 등의 전역 개체에 접근 가능하다. UseEffect Ex1 반복 작동시기 useState로 만들어진 값들이 변경 등으로 page class가 갱신 되는 경우가 발생한다. 이 때 useEffect를 사용하여 갱신 안 되게 할 수 있다. useEffect에 지정된 값이 변경되지 않으면 갱신 안 된다. 그러나 지정된 값이 없거나, Router.reload()에 의한 갱신은 갱신이 발생 한다. 'UseEffect Ex2'에서 AppRouter와 AppState의 예제 구분. 기타 UseEffect Ex3;
-
Nextjs bodyParserNextJs 2023. 1. 15. 17:26
Nodejs Express bodyParser nextjs는 편의를 위해서 기본적으로 body를 parsing하고 있다. 만약 별도의 multipart처리를 위해서는 body parsing을 꺼야 별도 module에서 parsing과련 event를 받을 수있다. 또는 data를 stream으로 처리하고 싶거나 raw-body로 사용하려면 꺼야 한다. 참고: multipart form-data 와 boundary bodyparser끄기 예제 export const config = { api: { bodyParser: false, }, }; export default (req: NextApiRequest, res: NextApiResponse) => { //... } https://nextjs.org/doc..