소프트웨어 라이브러리나 프레임워크를 선택할 때 일반적으로 개발자 경험이 고려됩니다.
"개발자 경험"을 언급할 때 개발자가 실제로 작업을 수행하는 방법을 언급하는 것입니다. 개발자는 사용하기 좋은 라이브러리나 프레임워크를 선택합니다.
이것이 우리가 현재 가장 인기 있는 라이브러리와 프레임워크를 갖게 된 주된 이유 중 하나입니다. 개발자는 작업을 지원하기 위해 만들어진 기존 도구가 있는 경우 처음부터 시작할 필요가 없습니다.
프레임워크는 개발자가 애플리케이션을 구성하기 위해 만들고 사용하는 소프트웨어의 일부이며 NextJS가 그 중 하나입니다.
이 게시물에서 우리는 Nextjs, 주요 기능 및 애플리케이션을 구축하는 데 사용할 수 있는 방법을 살펴보겠습니다. 바로 들어가 보겠습니다.
Next.js는 무엇입니까?
다음 .js 정적 웹페이지와 React 기반 온라인 애플리케이션을 빠르고 쉽게 구축하기 위한 JavaScript 프레임워크입니다. Windows, Linux 및 Mac을 포함한 다양한 플랫폼을 위한 훌륭한 웹 앱을 디자인할 수 있습니다.
react에 대해 최소한의 지식이 있고 react 생태계에 대해 더 알고 싶다면 Next.js 프레임워크에 익숙해야 합니다.
Next.js에는 시작하는 데 필요한 모든 것이 포함되어 있지만 NPM과 Yarn, JavaScript와 TypeScript, CSS와 SCSS, 정적 내보내기, 서버리스 배포 중에서 선택할 수 있습니다.
특징
- 라우팅은 자동으로 수행됩니다. URL이 파일 시스템, 페이지 폴더의 파일에 매핑되기 때문에 아무 것도 구성할 필요가 없습니다(물론 사용자 지정 옵션이 있음).
- 단일 파일의 구성 요소 – styled-jsx를 사용하여 구성 요소에 범위 범위의 스타일을 추가하는 것은 간단합니다. 이는 동일한 팀에서 완전히 통합되고 생성됩니다.
- 핫 코드 다시 로드 – Next.js가 디스크에 저장된 수정 사항을 감지하면 페이지를 다시 로드합니다.
- 동적 구성 요소 – JavaScript 모듈 및 React 구성 요소를 동적으로 로드할 수 있습니다.
- 정적 내보내기 – Next.js를 사용하면 다음 내보내기 명령으로 앱에서 완전히 정적 사이트를 내보낼 수 있습니다.
- 환경과의 호환성 – Next.js는 JavaScript, Node 및 React 에코시스템과 원활하게 통합됩니다.
- 자동으로 코드 분할 – 페이지를 렌더링하는 데 필요한 라이브러리와 JavaScript만 사용됩니다. 앱의 모든 코드가 포함된 단일 JavaScript 파일을 만드는 대신 Next.js는 앱을 여러 리소스로 지능적으로 나눕니다.
next.js 애플리케이션을 만드는 방법은 무엇입니까?
설치
node npx 명령을 사용하여 Next.js 프로젝트를 설치하고 빌드할 수 있습니다.
그러면 폴더와 Next.js 프로젝트를 실행하는 데 필요한 모든 파일, 구성 및 기타 항목이 생성됩니다.
앱이 생성되면 실행할 수 있습니다.
페이지 및 라우팅
Next.js로 경로를 처리하기 위해 라우팅 프레임워크를 사용할 필요가 없습니다. Next.js를 사용한 라우팅은 설정하기 쉽습니다. create-next-app 명령을 사용하여 새 Next.js 앱을 빌드하면 앱은 기본적으로 'pages'라는 폴더를 만듭니다.
이 '페이지' 폴더는 경로를 관리하는 곳입니다. 결과적으로 하위 디렉토리의 각 반응 구성 요소 파일은 별도의 경로로 처리됩니다.
예를 들어 폴더에 해당 파일이 포함된 경우:
- index.js
- 약.js
- aicles.js
이 파일은 다음 세 가지 방법으로 자동 변환됩니다.
- 인덱스 페이지 localhost/index
- 정보 페이지 localhost/about
- 블로그 페이지 localhost/articles
about.js 페이지의 예는 아래와 같습니다. 보시다시피 페이지에 대해 아무 것도 제공되지 않습니다. 이것은 단순히 표준 React 기능 구성 요소입니다.
경로
중첩 경로를 만들려면 먼저 하위 폴더를 설정해야 합니다. 예: 페이지/기사. 해당 폴더 내에 'contact.js' 반응 구성 요소를 생성하면 localhost/articles/contact 페이지가 생성됩니다.
한 파일을 pages/articles.js에, 다른 파일을 pages/articles/index.js에 넣는 경우. 둘 다 동일한 경로 localhost/blog를 반영합니다. 이 상황에서 Next.js는 단지 article.js 파일을 렌더링할 것입니다. 각 블로그 게시물에 고유한 경로가 있는 동적 경로는 어떻습니까?
- 로컬 호스트/블로그/첫 번째 기사
- 로컬 호스트/블로그/-두 번째 기사
대괄호 표기법을 사용하여 Next.js에서 동적 경로를 정의할 수 있습니다. 예: pages/article/[slug].js
링크 경로
이제 첫 번째 경로를 완료했습니다. 페이지를 해당 경로에 연결하는 방법을 묻는 것 같습니다. 그렇게 하려면 '다음/링크'가 필요합니다.
다음은 정보 페이지에 대한 링크가 포함된 홈 페이지의 예입니다.
링크의 스타일을 지정하려면 다음 구문을 사용하십시오.
경로 재지정
특정 페이지로 강제로 리디렉션해야 하는 경우 어떻게 해야 합니까? 예를 들어 버튼을 눌렀을 때? 'router.push'를 사용하여 이를 수행할 수 있습니다.
SEO
웹 애플리케이션의 페이지에는 HTML 본문 내의 데이터 외에 메타(헤드) 요소가 필요합니다. 이를 위해서는 React 애플리케이션에 React Helmet이라는 추가 요구 사항을 설치해야 합니다.
다음에서 다음/헤드의 헤드 구성 요소를 사용하여 검색 결과 및 포함에 표시될 웹 페이지에 메타데이터를 쉽게 추가할 수 있습니다.
구성 요소들
구성 요소나 레이아웃 파일을 개발해야 하는 경우가 많습니다. 예를 들어 탐색 모음을 렌더링하는 구성 요소입니다. 우리는 지금까지 페이지 폴더를 사용했습니다. 구성 요소가 경로 페이지가 아닌 경우에는 어떻게 합니까?
사용자가 localhost/navbar와 같은 페이지로 이동하는 것을 원하지 않습니다. 페이지 폴더에 Navbar.js 구성 요소를 배치하면 그렇게 됩니다. 상황에서 어떻게해야합니까?
'페이지가 아닌' 모든 구성 요소를 별도의 폴더에 저장하기만 하면 됩니다. 대부분의 Next.js 프로젝트는 'components'라는 별명을 사용하며 이 폴더는 프로젝트의 루트 폴더에 생성됩니다.
헤드 부품
초기 페이지 로드는 서버 측에서 Next.js에 의해 렌더링됩니다. 페이지의 HTML을 수정하여 이를 수행합니다. 헤더 섹션이 포함됩니다.
Next.js Head 구성 요소는 제목 및 메타와 같은 헤더 섹션 태그를 제공하는 데 사용됩니다. Head 구성 요소는 Layout 구성 요소의 이 예에서 사용됩니다.
404 만들기 페이지를 찾을 수 없습니다.
자신만의 404 오류 페이지를 만드는 것이 가능합니다. 메시지를 사용자 정의하거나 고유한 페이지 디자인을 추가할 수 있습니다. 페이지 폴더에서 404.js 파일을 만듭니다.
404 오류가 발생하면 Next.js가 자동으로 이 페이지로 리디렉션됩니다. 다음은 개인화된 404 페이지의 예입니다.
서버 측에서 데이터 가져오기
클라이언트 측에서 데이터를 다운로드하는 대신 Next.js를 사용하면 초기 데이터 채우기를 수행할 수 있습니다. 이는 서버에서 이미 채워진 데이터로 페이지를 보내는 것을 의미합니다.
서버 측 데이터 가져오기를 구현하기 위한 두 가지 선택 사항이 있습니다.
- 각 요청에서 데이터를 가져와야 합니다.
- 건설 과정에서 한 번만 데이터 받기(정적 사이트)
각 요청에 대한 데이터 가져오기
getServerSideProps 메소드는 각 요청을 서버 측에서 렌더링하는 데 사용됩니다. 이 함수는 구성 요소 파일의 끝에 포함될 수 있습니다. Next.js는 해당 함수가 구성 요소 파일에 있는 경우 getServerSideProps 개체로 구성 요소 소품을 자동으로 채웁니다.
빌드 시 데이터 가져오기
getStaticProps 메소드는 빌드 시 서버 측을 렌더링하는 데 사용됩니다. 이 함수는 구성 요소 파일의 끝에 포함될 수 있습니다. 이 메서드는 서버 코드를 실행하고 서버에 GET 요청을 보내지만 프로젝트가 완료될 때 한 번만 보냅니다.
왜 Next.js를 배워야 할까요?
그 이유 중 하나는 Next.js가 사용자 인터페이스 생성 웹 앱을 디자인할 때 가장 좋아하는 선택입니다.
하지만 Next.js가 제대로 하지 못했다면 충분하지 않았을 것입니다. 그렇죠?
정확히 무엇을 합니까?
그것을 이해하기 위해서는 먼저 몇 가지 개념을 정의해야 합니다. Next.js는 많은 웹 개발자가 클라이언트 측 웹 앱(브라우저에서)에 대해 가지고 있던 문제를 해결했기 때문에 인기를 얻었습니다. 이러한 단일 페이지 응용 프로그램(SPA)은 사용자가 페이지를 다시 로드할 필요가 없고 더 많은 상호 작용을 허용하므로 더 나은 경험을 제공했습니다.
그러나 이와 같은 앱의 자료 대부분은 브라우저에서 수행될 때만 표시되기 때문에 웹 크롤러는 이러한 앱의 텍스트 내용을 이해하는 데 어려움을 겪습니다.
그 결과, 인기에도 불구하고 많은 SPA가 Google과 같은 대형 검색 엔진에 거의 익명으로 남아 있었습니다. Next.js는 이제 React 구성 요소의 서버 측 렌더링(SSR)을 위한 보다 강력한 기본 제공 메커니즘을 포함합니다.
Next.js를 사용하면 개발자가 빌드 프로세스 중에 서버에서 JavaScript 코드를 구성하고 사용자에게 색인 생성 가능한 기본 HTML을 제공할 수 있습니다.
장점
- 사용자 경험에 적합
- SEO에 적합
- 동적 웹사이트처럼 작동하는 초고속 정적 웹사이트 구축
- UI 및 UX 구축의 유연성.
- 많은 개발 이점
- 훌륭한 커뮤니티 지원
단점
- 웹사이트나 애플리케이션은 구축하거나 개발하는 데 일정 시간이 걸립니다.
- 특정 작업의 경우 Next.js가 부적절합니다. 개발자는 Node.js 도구를 사용하여 동적 경로를 구성할 수 있어야 합니다.
결론
보시다시피 Next.js는 React 앱 개발을 단순화하고 가장 중요한 앱 로직과 UI에 집중할 수 있도록 합니다. 여기에는 풍부한 프론트엔드 및 API 기반 앱을 만드는 데 필요한 모든 것이 포함됩니다.
또한 정적 HTML 페이지를 빌드할 수 있는 기능으로 인해 블로그 및 비즈니스 웹 사이트와 같은 콘텐츠 전용 프로젝트에도 적합합니다.
현재 버전에서 Next.js는 높은 수준의 개발자 경험을 유지할 뿐만 아니라 시각적 성능과 사용자 경험을 향상시키는 도구를 제공하여 이 프레임워크의 밝은 미래를 보장합니다.
댓글을 남겨주세요.