Dev/Next.js
-
Next.js - 기본 동작 2편Dev/Next.js 2023. 5. 8. 21:36
기본 동작 2편에서는 백엔드에 해당하는 부분을 다룰 것이다. api를 통신하기 위하여 포스트맨도 함께 사용할 것이다. api route handlers 페이지의 라우팅하는 방법과 비슷하게 간다. 이때에는 app디렉토리 아래에 api라는 폴더를 생성한 후, 라우팅되기위한 폴더와 그 아래에 route.js 단일 파일을 생성하여 엔드포인트를 만든다. route.js파일에는 다음과 같이 만들어서 응답한다. Postman으로 해당 엔드포인트에 요청을 보내면 아래와 같이 응답이 온다. json형태로의 응답값을 보내고 싶다면 NextResponse를 사용한다. 다음과 같이 쿼리스트링을 넘길 때에는 어떻게 해야할까? ( http://localhost:3000/api/sample/search?userId=2) 지금껏 해..
-
Next.js - 설치 및 기본 동작 1편Dev/Next.js 2023. 5. 8. 21:13
Next.js를 실무에 사용하기 위하여 유튜브에서 Crash Course 영상을 토대로 작성하였다. 프론트 진영에서 트랜드가 빨라서 새로은 또 무엇인가를 공부해야하는 걱정이였으나 그나마 다행히 Next.js는 React를 바탕으로 만들어진 웹 front-end 프레임워크라 그런지 생각보다 할만하다는 생각이 들었다. 프레임워크라 react에서 부족하거나 일일이 해야했던 작업들을 편하게 해주기도 하였다. 왜 Next.js가 핫한지 체감이 되는 강의였다. https://www.youtube.com/watch?v=Y6KDk5iyrYE Next.js 프로젝트 설치 $ npx create-next-app next-crash automatic routing 기존의 next.js에서는 automatic routing을..
-
Next.js - 소개Dev/Next.js 2023. 5. 8. 20:46
Next.js 는 React로 만드는 서버사이드랜더링(SSR) 프레임워크이다. Next.js를 사용하면 어떠한 장점이 있고, 왜 사용하는 것일까? 우선, 클라이언트 랜더링(CSR)의 경우 모든 js 파일을 로드하고 사용자는 이러한 웹을 보게 된다. 그래서 처음(초기 랜더링)에 많은 대기시간을 가지는 문제점이 있다. 또한, SEO(search engine optimization,검색 엔진 최적화) 문제를 발생시킨다. 자바스크립트가 로드되지 않았을 때, 검색엔진이 스캔함으로써 아무 페이지도 걸리지 않게 된다. Next.js를 사용하게 되면 pre-reloading을 통해 미리 데이터가 랜더링 된 페이지를 가져올 수 있게 해 주므로 사용자에게 더 좋은 경험을 선사한다. 그리고 검색 엔진에 잘 노출될 수 있도록..