NextJS 프로그레시브 웹 앱

What if we could quickly setup a progressive web app, with server side rendering and routing mechanism out of the box? Would that sound interesting? That’s why you here, stick with me and enjoy the road.

모두 NextJS 으로 시작합니다. 설치하고 다음 코드로 실행합니다.

"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
},

첫 번째 질문은 반응 프로젝트를 시작하기 위해 다른 접근 방식을 사용하는 이유입니다create-react-app. server side rendering 및 더 좋고 쉬운 오프라인 작업 방법을 원한다면 질문은 매우 간단합니다. 잘 모르겠어? 여기 간다 …

create-react-app은 즉시 오프라인 지원으로 제공되지만 자산을 로컬에 저장하는 방식이 제한됩니다. 생성된 자산(js, css, 이미지, 글꼴 ...)으로 우리를 제한하지만 CDN 파일, 백엔드 API, 시스템별 라우팅도 저장하려면 어떻게 해야 할까요? 아마도 ejecting 귀하의 프로젝트 및(또는) react-app-rewired 과 같은 다른 라이브러리를 사용하여 거기에 어떻게 갈 것입니까? 사용자 정의 스크립트 작성 시스템을 유지하는 것을 좋아하는 이유는 무엇입니까?

이제 이 코드를 살펴보십시오.

const isProd = process.env.NODE_ENV === "production";

const withPWA = require("next-pwa")

module.exports = withPWA({
 pwa: {
   disable: !isProd,
   dest: "public"
 }
})

간단한 higher order function으로 원하는 기능을 추가합니다! 너무 빨라? 이것을 제대로 소화해 봅시다.

먼저 이것dummy example을 살펴보십시오(모든 기능을 완전히 경험하고 싶다면 크롬을 사용하십시오. 다른 기능에 반대되는 것은 없습니다. 하지만 이 기사를 작성하는 동안 progressive web app 기능은 여전히 ​​진행 중인 작업이며 앱의 설치 가능한 옵션이 작동하지 않음)

거기에 있으면 개발자 도구를 열고 페이지를 탐색하거나 새로 고치는 동안 리소스(js, css, 글꼴, api 호출 ..)가 로컬에 저장되는지 확인합니다.



웹사이트 URL 표시줄 바로 뒤에 있는 더하기 아이콘도 확인하세요.



그리고 네트워크 탭을 검사하면 초기 로드가 서버에서 이미 렌더링된 모든 앱과 함께 제공되는 것을 볼 수 있습니다 .. :)



이것이 바로 더미 앱의 사용자 기능입니다. 인터넷 연결을 비활성화하면 연결이 없고 앱이 계속 작동한다는 친근한 메시지를 볼 수 있습니다.



그러나 이제 문제가 발생합니다. 어떻게 수행됩니까? 읽기에 지쳤습니까? 중요한 내용으로 바로 이동: the code !

구현은 NextJS 프로젝트로, 인터페이스 요소에 MaterialUI, 유형 검사에 Typescript, 프로그레시브 웹 앱 기능을 위한 다음 플러그인next-pwa 및 빠른 보너스인 확인this code을 사용합니다. next-mdx에서 제공하는 next에 대한 MDX 지원입니다.

코드를 보면 react-router 또는 이와 유사한 라우팅 코딩이 없음을 알 수 있습니다. 작동 중인 NextJS는 자동 라우팅 시스템을 제공합니다. 경로를 페이지 폴더 아래에 넣으면 라우팅이 완료됩니다.



작동 방식과 수행 방법이 궁금하시면 여기를 확인하십시오. https://nextjs.org/docs/routing/introduction

여기서 우리는 올바른 도구를 선택하는 것만으로 고급 기능으로 프로젝트를 얼마나 쉽게 설정할 수 있는지 명확하게 알 수 있습니다. 결국 개발자의 무거운 작업은 개발이 아니라 우리가 필요로 하는 올바른 도구를 선택하기 때문입니다.

사용할 수 있는 멋진 바퀴가 너무 많은데 왜 우리가 직접 만들까요? 그것들을 잡고 아름다운 자동차를 만들어 봅시다!