우와! Next.js는 계속해서 인상적입니다.

Next.js, 버전 9의 최신 릴리스가 나왔을 때 저는 흥분했습니다. 이것은 서버 측 React를 산들바람으로 만드는 많은 기능을 제공합니다. 내가 처음으로 Next.js를 만지작거리기 시작했을 때 나는 금방 매혹되었지만 몇 가지는 투박하고 구성하기 어려웠습니다.

글쎄, 그들이 이번 업데이트로 기준을 높였다고 말할 수 있어서 기쁩니다. 나는 그것에 대해 격찬 할 것이지만 최신 기능을 다루는 블로그 게시물을 확인해야합니다.

Zeit's Version 9 Blog Post

간략한 개요를 위해 Typescript를 사용하려는 경우 현재 기본적으로 Typescript에 대한 지원이 있습니다. 또한 자동 정적 최적화를 통해 서버 측 렌더링 및 정적 사전 렌더링을 활용하여 사이트를 매우 빠르게 만들 수 있습니다. 프로덕션 개선을 잊지 말고 개발자 경험에 집중하십시오.



개발자 경험에 대해 말하면서, 제가 가장 좋아하는 두 가지 새로운 추가 사항을 언급하고 싶습니다.

첫 번째는 API 경로입니다. 페이지 디렉토리 내에 /api 폴더를 만들기만 하면 됩니다. 각 끝점은 해당 디렉터리 내부의 javascript 파일입니다. 이 기능을 사용하면 데이터베이스에 연결하고, 게시 요청을 처리하고, 앱을 작동시키는 데 필요한 모든 작업을 손쉽게 필요한 API 구축을 시작할 수 있습니다.

더 이상 별도의 Express 서버를 구축하고 실행할 필요가 없습니다. 흥미로운 부분은 끝점 파일에 있어야 하는 유일한 것이 간단한 처리기 함수라는 것입니다. 이것은 나머지 React의 기능적 구성 요소 스타일을 반영하여 매끄러운 경험이라고 생각합니다.

다음과 같습니다.

const handler = (req, res) => {
  res.json("message:" "Keep hitting those endpoints baby.")
}

export default handler

Next.js는 이제 처음부터 끝까지 완전한 패키지입니다. 가능한 생산성을 높이고 앱을 실행하는 데 필요한 모든 것을 제공합니다. 클라이언트 측 React Router 접근 방식만큼 빠르고 고통 없이 동적 페이지를 생성하는 또 다른 기능이 있습니다.

페이지 디렉토리 내부에서 파일 이름을 다음과 같이 지정합니다blog/[postId].js. 구성 요소 파일 내에서 NextgetInitialProps를 사용하여 구성 요소를 렌더링하는 데 필요한 모든 데이터를 가져옵니다.

const Post = ({ data }) => {
  return <p>Post: {data.title}</p>
}

Post.getInitialProps = async ({ query }) => {
  const { id } = query
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${id}`
  )
  const data = await response.json()
  return { data }
}

export default Post

여러분, 이 업데이트로 여러분도 저만큼 흥분되길 바랍니다. 여러분 모두와 공유하고 싶었습니다. 나는 이미 내 다음 프로젝트를 꿈꾸고 있음을 발견했습니다.

나가서 멋진 것을 만드십시오.

Note: I have no affiliation with Zeit or the Next.js team. I'm just a huge fan of their work!