다음 단계를 구성합니다.js를 사용하여 크로스플랫폼 개발

모바일 앱을 만들 생각은 없으나 여러 개의 코드 라이브러리를 처리할 생각은 없으신가요?
네, 다음.js와 콘덴서 할 수 있어!
다음.js는 지난 며칠 동안 매우 유행했고 많은 것이 합리적이었다.그것과 함께 일하는 것은 일종의 즐거움이며, 놀라운 개발자 체험을 제공한다.
오늘, 나는 다음 응용 프로그램과 같은 코드 라이브러리를 가진 모바일 응용 프로그램을 구축하는 방법을 알려줄 것이다.js 응용 프로그램, 이 컴퓨터 응용 프로그램으로 모바일 장치에서 실행!데스크톱 프로그램으로 어떻게 사용하는지에 대한 보상 부분도 있습니다.

tl；박사 01 명

Next를 사용하여 안드로이드, iOS 및 데스크톱 응용 프로그램을 만듭니다.js.
만약 당신이 코드만 원한다면, 방문할 수 있습니다
github.com/k4u5h4L/next-capacitor-demo

당신은 생산 중에 그것을 사용해야 합니까?

이것은 너에게 달려 있다...모든 일은 하나의 균형이다. 다음 단계는.js+콘덴서도 완벽하지 않아요.

이점:

웹과 모바일 응용 프로그램에 대한 코드 라이브러리만 유지하면 쉽게 실현할 수 있다.

다음 단계는 사랑하는 사람을 떠나지 않아도 된다.js와 React 생태계.

크로스플랫폼 응용 프로그램을 사용하는 것이 상업적 의미가 있다.

단점:

넥스트의 일부 기능js는 이동이나 데스크톱 프로그램에 사용할 수 없습니다.따라서 프로젝트 변경이 필요하다.

성능에 영향을 줄 수 있습니다.

이 프로젝트는 아직 성숙하지 않아서 매우 흥분되지만 여전히 상당히 새롭다.

고려 사항

다음 단계에 익숙해지면.js, 예를 들어 getServerSideProps 서버 쪽 렌더링 기능을 사용해야 합니다.유감스럽게도 그것들은 콘덴서와 함께 일할 수 없다.다음.js는 진정으로 모바일 개발에 사용되는 것이 아니다.

라이브 재로드의 경우 노트북/데스크탑 및 휴대폰을 WiFi로 연결해야 하며 적어도 이 문서를 읽고 있는 경우

우리 시작합시다, 네?

선결 조건:

노드가 필요합니다.js가 설치되었습니다.

모든 nodejs 패키지 관리자.나는 이곳에서 사용yarn하지만 너도 사용할 수 있다npm.

USB 디버깅을 위한 물리적 모바일 장치를 켜서 시스템에 연결

Java가 설치되었습니다.가장 좋은 것은 8판이다.이것은android를 위한 응용 프로그램을 구축하는 것입니다.실행을 통해 버전 확인

java -version

그만 말하고 시작합시다!

새로운 다음 것을 초기화합시다.js 프로젝트.뛰어다니다

yarn create next-app next-capacitor-app

모든 내용을 다운로드한 후 프로젝트에 콘덴서를 설치합니다.

yarn add @capacitor/core @capacitor/cli @capacitor/android @capacitor/ios

의존항을 설치한 후 콘덴서를 초기화합니다.

npx cap init next-capacitor-app com.nextcap.app --web-dir=out

# The format as per capacitor docs
# npx cap init [name] [id] --web-dir=build

우리는 web-dir를 out로 설정할 것이다. 왜냐하면 자산을 내보낼 때 out 목록에 있기 때문이다.

대상 로컬 플랫폼 설치

npx cap add android
npx cap add ios

이제 너는 준비가 다 되었을 것이다.기본 페이지를 얻기 위해 pages/index.js 로 이동하고 편집하십시오.

import React from 'react'

export default function Home() {
  return (
    <div>
      <h1>
        Hey there!
      </h1>
    </div>
  )
}

지금,next에서 정적 자산을 도출합시다!

yarn run build && npx next export

전문 알림: next export 명령을 scripts의 package.json 부분에 추가할 수 있습니다.
지금, 당신의 다음 것을 동기화합니다.android와 ios 플랫폼을 사용하는 js 자산

npx cap sync

그런 다음 물리적 디바이스를 연결하고 애플리케이션을 실행합니다.우선 adb 휴대전화를 식별할 수 있는지 검사한다.

adb devices

# if a device appears, run the next command.
# else accept a pop up if it appears on your device

npx cap run

지금 당신은 핸드폰에 설치된 응용 프로그램을 볼 수 있을 것입니다. 당신은 다른 어떤 응용 프로그램처럼 그것과 상호작용할 수 있습니다!
그런데 잠깐만, 우리 한 가지 잊어버렸어.개발 과정에서 실시간 변화는 작용하지 않는다.매번 구축, 내보내기, 실행이 필요합니다.그럼 너무 바쁘니까 지금부터 현장에서 다시 불러올게요!npx cap init [***]를 실행하면 프로젝트의 루트 디렉터리에 capacitor.config.json 파일이 생성됩니다.계속해서 편집합시다. 그러면 서버를 추가해서 실시간으로 다시 불러올 수 있습니다.
시스템의 IP 주소를 가져오려면 다음을 실행하십시오.

ifconfig

운영 체제에 따라 또는 기타 모든 명령이 동일합니다.그나저나 저는 Arch Linux를 사용하기 때문에 ifconfig 아주 좋습니다.만약 윈도우즈에 있다면, 실행 ipconfig 을 시도해 볼 수 있습니다.

이것은 로컬 네트워크 IP가 됩니다.저는192.168.1.9입니다.그래서 이걸로 할게요.capacitor.config.json에 다음을 추가합니다.

{
    "server": {
        "url": "http://192.168.1.9:3000"
    }
}

지금 설치했으니 빨리 뛰어라

yarn run build
npx next export

npx cap sync

이제 넥스트가 제공하는 개발 서버를 실행할 수 있습니다.js

yarn dev

현재 dev 서버가 실행됨에 따라 물리 장치에서도 프로그램을 실행할 수 있습니다.

npx cap run

위대하다너는 지금 너의 프로그램으로 실시간으로 다시 불러올 수 있다.게시 APK를 구축하기 전에 capacitor.config.json에서 서버 구성을 제거해야 합니다.

보너스 부분

만약 네가 여기까지 올 수 있다면, 축하해!현재, 우리는 전자론과 함께 사용하는 프로그램을 구축할 것이다.js도 데스크톱 프로그램에 적용됩니다!
콘덴서에 전자 플랫폼 추가 및 설치

yarn add @capacitor-community/electron
npx cap add electron
npx cap sync

응용 프로그램을 실행하려면

npx cap open electron

이제 너의 다음 친구와 함께 생활을 즐겨라.js 코드 라이브러리는 네트워크, 안드로이드, iOS, 윈도, MacOS, Linux를 뛰어넘는다.
이렇게이 문장이 너희들을 도울 수 있기를 바란다.건배!