넥스트js 썸네일형 리스트형 [Next.js] Next.js 13에서 pages 디렉터리 사용 시 url 값 변경해주기 {/* url에 query값만 숨겨주기 */} 링크 next/link 의 기능 중 하나닌 as 를 사용하면 사용자에게 url을 보여주는 곳 에서 state 값을 숨긴 채 노출시켜줍니다. {/* 잘못된 경우 */} 링크 하지만 위의 방법처럼 사용하면 요청하는 경로가 href의 pathname을 보는 게 아닌 as 의 경로를 바라보게 됩니다. 왜 그런건지... 아직도 공부가 부족하네요... {/* next.config.js */} /** @type {import('next').NextConfig} */ const nextConfig = { async rewrites() { return [ { source: '/:path*', destination: '/pages/:path*', }, ]; }, }; modu.. 더보기 [Next.js] Next 프로젝트 시놀로지에 배포한 척 하기 -리액트 배포는 쉬웠는데... 일단 리액트 프로젝트를 공부한답시고 시놀로지에 배포를 해본 적은 있었기 때문에 비교적 어렵지 않았습니다. React 프로젝트를 시놀로지에 배포하는 방법은 먼저 React 프로젝트를 build 하여 말아주고 시놀로지의 Docker 를 사용하여 컨테이너를 하나 만들어줍니다. 도커 생성 시 마운트 경로를 위의 사진과 같이 /home/node/app 으로 설정해 줍니다. 이 때 port 번호는 사용 할 포트번호를 입력해주고 그리고 해당 디렉토리에 위와같이 node_modules을 설정해주고 index.js 파일을 설정해주고... 같은 위치에 React build 디렉토리를 넣어준 후 Docker를 실행하면 프로젝트 배포가 됩니다. 도커를 사용하니 따로 ssh를 사용하여 nohup을.. 더보기 [Next.js] error, 404 페이지 만들기 - 컴포넌트 파일의 위치 src └ pages 404.jsx _error.jsx - 각 컴포넌트들의 위치는 위와같이 src 아래 pages 위치에 만들어준다. - Next.js 에서 Error 페이지 만들기 // _error.jsx const Error = () => { return( 에러페이지 접속 시 메시지 입력 ) } export default Error; - 위와같이 _error.jsx 컴포넌트를 만들어 준 후 코드를 작성해주면 Error 시 자동으로 Error페이지로 이동된다. - Next.js 에서 404 페이지 만들기 // 404.jsx const NotFound = () => { return( NotFound 페이지 접속 시 보여질 메시지 입력 ) } export default NotFou.. 더보기 이전 1 다음
