AI Platform / Web

nextjs에서 환경설정을 하고, custom한 설정(configuration of Next.js)을 하기위해서 next.config.js를 사용하면 된다. next.config.js에 대한 기초적인 지식부터 심화 부분까지 정리해 보자. 우선은 실무단계에서 기본적으로 크게 development 단계와 deployment 단계로 구분한다. 배포를 하는 setting과 개발 setting를 다르게 해야한다. dotenv를 많이 사용하여, env.dev와 env.prod 사용하여 환경변수 설정을 해도 되지만, frontend 개발자라면, 아래와 같이 next.config.js 로 설정하는 방법도 알아두자. const { PHASE_DEVELOPMENT_SERVER } = require('next/constan..

Error: Do not use the HTML tag to navigate to /urlencode/. Use Link from 'next/link' instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages Nextjs 에서 빌드 시 발행하는 에러에 대한 해결책을 적어보고자 한다. 에러의 내용을 보면 a태그를 next/link로 변경하라는 내용으로 해석된다. 사실 link 태그로 변경하면 된다. 그러나 공식문서에 나와있는 내용을 통해 조금 더 디테일하게 정리해보고자 한다. 기본적으로 Nextjs에서는 Single Page app 경험을 제공한다. 따라서 단순히 HTML의 a태그를 사용하면, 페이지가 새로고침 되기 때문에 client-s..

SSR, SSG, CSR에 따라 Nextjs로 데이터를 방법에 대해 하나씩 알아보자. 기존의 react는 CSR방식으로 useEffect를 사용했다면, react의 프레임워크인 Nextjs에서는 getStaticProps , getStaticPaths, getServerSideProps 활용하여 데이터를 가져오는 방법에 대해 하나씩 알아보자. Nextjs의 각각의 페이지는 .js, .jsx, ,tx, ,tsx,파일인 리액트 컴포넌트이고 각각의 페이지는 파일 이름과 관련이 있다. 예를 들면 pages/about.js를 아래와 같이 만들었다고 하자. function About() { return About } export default About 그러면 아래의 리액트 컴포넌트는 /about 로 브라우저 접근..

nextjs를 통해 react를 포함시켜 시작하는 방법에 대해 알아보자. react로 Client side rendering(CSR)을 Server side rendering(SSR)로 변환하기 위해 많이 넘어온다. nextjs는 SSR 말고도 SSG나 serverless에도 최적화되어있다. 이러한 Nextjs를 시작하는 것은 환영받을 일이 맞다. Next.js는 react라이브러리를 활용한 프레임워크다. 따라서 react과 다른 기초 지식이 없다면, 시작하기 힘들다고 할 수 있다. 관련 내용은 아래의 url을 참고하여 보고오자. [Web/nodejs] - nodejs 기초 총 정리 nextjs 프로젝트 생성 > npx를 통해 프로젝트를 생성한다. $ npx create-next-app@latest np..