nextjs tailwind ionic capacitor starter 다운로드 - nextjs tailwind ionic capacitor starter 소스 코드 다운로드

nextjs tailwind ionic capacitor starter

AI 소스 코드

5.0.0

다운로드

다음 .js + 테일 윈드 CSS + 이온 프레임 워크 + 커패시터 모바일 스타터

스크린 샷

이 repo는 Next.js, Tailwind CSS, Ionic Framework 및 Capacitor를 사용하여 iOS, Android 및 Progressive Web App을 구축하기위한 개념적 시작점입니다.

JS는 프로덕션 반응 응답 앱 경험을 처리하고, Tailwind는 앱의 각 페이지를 스타일링하는 데 사용할 수 있으며, 이온 프레임 워크는 크로스 플랫폼 시스템 컨트롤 (Navigation/Transitions/Tabs 등)을 제공 한 다음 Capacitor는 모두 IOS, Android 및 웹에서 실행합니다.

스택에 대한 개요와 모든 작동 방식은이 블로그 게시물을 참조하십시오 : https://dev.to/ionic/build-mobile-apps-with-tailwind-css-next-onic-framewor-and capacator-3kij

용법

이 프로젝트는 표준 Next.js 앱이므로 일반적인 Next.js 개발 프로세스가 적용됩니다 (브라우저 기반 개발을위한 npm run dev ). 그러나 하나의 경고가 있습니다. 앱은 순전히 클라이언트 측을 실행해야하므로 iOS 및 Android에 배포하려면 내보내야합니다. (다음에 대한 자세한 내용. JS Export)

앱을 구축하려면 실행 :

npm run build

모든 클라이언트 측면 파일은 ./out/ 디렉토리로 전송됩니다. 이 파일은 기본 iOS 및 Android 프로젝트에 복사해야하며 Capacitor가 들어오는 곳입니다.

npm run sync

마지막으로 다음 실행 명령을 사용하여 각 플랫폼에서 앱을 실행하십시오.

npm run ios
npm run android

Livereload/Instant Refresh

개발 중 ( npm run dev 실행할 때) LiverEload 및 Instant Refresh를 활성화하려면 로컬 인터페이스의 IP 주소를 찾아 다음 Next.js 서버가 실행중인 다음 192.168.1.2 에서 서버 URL 구성 값을 지적하도록 서버 URL 구성 값을 설정 capacitor.config.json .

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

참고 :이 구성은 최근 베타에 들어간 커패시터 3에서 더 쉽습니다.

API 경로

API 경로를 사용할 수 있지만 일부 최소 구성이 필요합니다. 자세한 내용은이 토론을 참조하십시오.

경고

이 프로젝트의 한 가지주의 사항 : 앱은 순수한 클라이언트면을 실행하고 다음에 다음을 사용해야하므로 JS의 내보내기 명령을 사용해야 하므로이 코드 기반의 서버 측면 렌더링이 없음을 의미합니다. SSR과 완전히 정적 Next.js 앱을위한 방법이있을 수 있지만 Babel 플러그인이 필요 하거나이 프로젝트의 범위가 아닌 코드 공유와 함께보다 정교한 Monorepo 설정이 필요합니다.

또한 Next.js 라우팅은이 앱에서 기본 앱 쉘을 렌더링하고 이온 반응 라우터에 참여하기위한 포괄적 인 경로를 넘어서 실제로 많이 사용되지 않습니다. 이는 주로 Next.js 라우팅이 친절한 이온 사용과 같은 기본 스타일 전환 및 역사 상태 관리를 가능하게하기 위해 설정되지 않았기 때문입니다.