글 읽기 읽기 기능의 경우 사용자와 상호작용하는 게 아니라 내용을 출력할 뿐이라 서버 컴포넌트로 작성하는 게 유리하다. 일단 데이터를 서버로부터 가져와야 하므로 async await를 써준다. // /src/app/read/[id]/page.tsx export default async function Read(props: any) { const resp = await fetch(`http://localhost:9999/topics/${props.params.id}`); const topic = await resp.json(); return ( {topic.title} {topic.body} ); } 참고자료 생활코딩 - Next.js 13 https://opentutorials.org/course/509..

Server Componet VS Client Component Next.js에서는 Server Component, Client Component라는 개념이 구분되어 있다. React 18 버전부터 서버 컴포넌트라는 개념이 추가가 되면서 Next.js가 그걸 가져와서 구분되어 진 것이다. 서버 컴포넌트를 안 써봤다면 지금까지 클라이언트 컴포넌트 방식으로 구현해왔을 것이다. 그리고 클라이언트 컴포넌트에서는 useState, useEffect, onClick, onChange와 같은 것들을 사용할 수 있는데 서버 컴포넌트에서 이런 것들을 사용하게 되면 에러가 발생하게 된다. 두 컴포넌트는 사용할 수 있는 api가 다르다는 것을 기억하면 좋다. 그리고 Next.js에서는 특별한 조치를 취하지 않는다면 서버 컴..

Backend 이제 애플리케이션에 생명력을 불러넣어보자. 지금 애플리케이션은 하드코딩 되어 있는 상태이다. 이제 백엔드를 구축해서 백엔드에 있는 데이터를 가지고 와서 동적으로 내용을 표시하도록 처리하자. Next.js를 순수하게 백엔드로도 사용하고 싶다면 매뉴얼의 라우팅 쪽에 Route Handlers 부분을 참고하면 next.js로 api를 구축하는 방법도 공부할 수 있다. 우리는 json server라는 것을 통해 빠르게 백엔드를 구축해보자. npx json-server --port 9999 --watch db.json json-server를 9999 포트에서 실행시킬 것이고 db.json이라는 파일에 내용 정보를 저장하고 그 정보가 바뀌면 바로 반영하기 위해 watch 옵션을 주자. Resource..

CSS Next.js에서 css를 사용하는 가장 간단한 방법을 알아보자. layout.js를 보면 import './globals.css' 가 있는 걸 볼 수 있다. layout.js는 루트 레이아웃이기 때문에 어떤 페이지에 방문하던 간에 globals.css 파일이 로드되게 된다. 따라서 전역적으로 디자인을 적용하고 싶다면 globals.css 파일에서 설정하면 된다. 참고자료 생활코딩 - Next.js 13 https://opentutorials.org/course/5098 Next.js 13 - 생활코딩 수업 개요 Next.js는 웹 애플리케이션을 빌드하고 배포하는 데 강력한 도구입니다. 이 도구를 활용하면 모던한 웹 앱을 빠르고 효율적으로 구축할 수 있습니다. 그럼 함께 미래의 웹 개발 패러다 o..

정적 자원 Next.js에서 이미지와 같은 정적인 컨텐츠를 사용할 때는 어떻게 하면 될까? public이라는 폴더가 있는데 여기에 이미지 파일을 위치시키면 된다. 파일을 읽어오고 싶을 때는 img 태그에서 src를 /{image_name} 로 하여 사용하면 된다. 참고자료 생활코딩 - Next.js 13 https://opentutorials.org/course/5098 Next.js 13 - 생활코딩 수업 개요 Next.js는 웹 애플리케이션을 빌드하고 배포하는 데 강력한 도구입니다. 이 도구를 활용하면 모던한 웹 앱을 빠르고 효율적으로 구축할 수 있습니다. 그럼 함께 미래의 웹 개발 패러다 opentutorials.org

Server Side Rendering SSR - Next.js 를 사용하면 좋은 것. 개발자 도구를 켜고 메뉴에서 run command를 클릭하면 disable javascript라는 메뉴가 있다. 이걸 누르면 JS가 꺼지게 된다. React는 JS 기술이기 때문에 JS가 동작하지 않으면 웹페이지가 아예 렌더링되지 않는다. 하지만 Next.js로 만든 웹페이지는 리로드 해도 렌더링이 잘 된다. 이것이 어떻게 가능한가? 사용자가 요청하면 next.js가 서버 쪽에서 react를 실행해서 그 응답 결과를 .next에 저장해서 그것을 응답하기 때문이다. Next.js는 JS가 아닌 HTML을 응답한다. 따라서 잘 동작하는 것이고 검색엔진 최적화에 좋다. disable javascript를 실행했다면 다시 e..