Next.js Nativeってなんぞや❓
Capacitor と呼ばれるwebアプリをクロスプラットフォーム化するライブラリを使って、
Next.jsをネイティブアプリ化できるようにしたものみたい👀
Githubにてスターターキットも用意されてたので、これを試す
https://github.com/RobSchilderr/nextjs-native-starter
とりあえず、Githubからクローン
$ git clone git@github.com:RobSchilderr/nextjs-native-starter.git
Cloning into 'nextjs-native-starter'...
remote: Enumerating objects: 3127, done.
remote: Counting objects: 100% (747/747), done.
remote: Compressing objects: 100% (406/406), done.
remote: Total 3127 (delta 382), reused 625 (delta 296), pack-reused 2380
Receiving objects: 100% (3127/3127), 3.59 MiB | 1.22 MiB/s, done.
Resolving deltas: 100% (1617/1617), done.
$ cd nextjs-native-starter
❯ npx create-supertokens-app@latest --manager=yarn
Need to install the following packages:
create-supertokens-app@latest
Ok to proceed? (y) y
_____ _____ _
/ ___| |_ _| | |
\ `--. _ _ _ __ ___ _ __| | ___ | | _____ _ __ ___
`--. \ | | | '_ \ / _ \ '__| |/ _ \| |/ / _ \ '_ \/ __|
/\__/ / |_| | |_) | __/ | | | (_) | < __/ | | \__ \
\____/ \__,_| .__/ \___|_| \_/\___/|_|\_\___|_| |_|___/
| |
|_|
create-supertokens-app (v0.0.40) lets you quickly get started with using SuperTokens!
Choose your tech stack and the authentication method, we will create a working project that uses SuperTokens for you.
? What is your app called? <自分のアプリ名を入力>
? Choose a frontend framework (Visit our documentation for integration with other frameworks): <Capacitor> を選択
✅ Finished setting up folder structure!
✅ Setup complete!
create-supertokens-app uses nextjs-native-starter as a template app for Capacitor. nextjs-native-starter is a starter project created by https://github.com/RobSchilderr, if you face any problems please open an issue here: https://github.com/RobSchilderr/nextjs-native-starter/issues or reach out to us on the SuperTokens Discord server: https://supertokens.com/discord.
To get started refer to the README on Github https://github.com/RobSchilderr/nextjs-native-starter
npm notice
npm notice New major version of npm available! 8.1.2 -> 10.2.4
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.2.4
npm notice Run npm install -g npm@10.2.4 to update!
npm notice
$ yarn install
yarn install v1.22.19
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
error lint-staged@13.3.0: The engine "node" is incompatible with this module. Expected version "^16.14.0 || >=18.0.0". Got "16.13.1"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
Node.jsのバージョンが若干古かったので、アップデートする。
$ node -v
v16.13.1
自分は asdf を利用してるので、取り急ぎローカルインストール
$ asdf install nodejs 20.10.0
nodejs 20.10.0 is already installed
$ asdf local nodejs 20.10.0
$ yarn install
yarn install v1.22.19
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning " > @testing-library/react@14.0.0" has unmet peer dependency "react@^18.0.0".
warning " > @testing-library/react@14.0.0" has unmet peer dependency "react-dom@^18.0.0".
warning " > @testing-library/react-hooks@8.0.1" has unmet peer dependency "react@^16.9.0 || ^17.0.0".
warning "@testing-library/react-hooks > react-error-boundary@3.1.4" has unmet peer dependency "react@>=16.13.1".
warning " > @testing-library/user-event@14.4.3" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning " > ts-node@10.9.1" has unmet peer dependency "@types/node@*".
warning "workspace-aggregator-eedda6f6-92a8-4dd2-b705-1ca1f11784ee > next-app > autoprefixer@10.4.15" has unmet peer dependency "postcss@^8.1.0".
warning "workspace-aggregator-eedda6f6-92a8-4dd2-b705-1ca1f11784ee > app > nextjs-cors@2.1.2" has incorrect peer dependency "next@^8.1.1-canary.54 || ^9.0.0 || ^10.0.0-0 || ^11.0.0 || ^12.0.0 || ^13.0.0".
warning "workspace-aggregator-eedda6f6-92a8-4dd2-b705-1ca1f11784ee > config > eslint-config-airbnb@19.0.4" has unmet peer dependency "eslint-plugin-jsx-a11y@^6.5.1".
warning "workspace-aggregator-eedda6f6-92a8-4dd2-b705-1ca1f11784ee > config > eslint-config-airbnb@19.0.4" has unmet peer dependency "eslint-plugin-react@^7.28.0".
warning "workspace-aggregator-eedda6f6-92a8-4dd2-b705-1ca1f11784ee > config > eslint-config-airbnb@19.0.4" has unmet peer dependency "eslint-plugin-react-hooks@^4.3.0".
warning "workspace-aggregator-eedda6f6-92a8-4dd2-b705-1ca1f11784ee > app > react-hot-toast > goober@2.1.13" has unmet peer dependency "csstype@^3.0.10".
[4/4] 🔨 Building fresh packages...
$ husky install
husky - Git hooks installed
✨ Done in 7.98s.
$ yarn dev
yarn run v1.22.19
$ turbo run dev --parallel
• Packages in scope: app, config, lib, next-app, next-web, tsconfig, ui
• Running dev in 7 packages
• Remote caching disabled
next-web:dev: cache bypass, force executing 3c76fff7a4831ea7
next-app:dev: cache bypass, force executing b13ac948800dc3f0
next-web:dev: $ next dev --port 3001
next-app:dev: $ next dev --hostname 0.0.0.0
next-app:dev: ▲ Next.js 14.0.0
next-app:dev: - Local: http://localhost:3000
next-app:dev: - Network: http://0.0.0.0:3000
next-app:dev:
next-web:dev: ▲ Next.js 14.0.0
next-web:dev: - Local: http://localhost:3001
next-web:dev:
next-app:dev: ✓ Ready in 2.9s
next-web:dev: ✓ Ready in 2.9s
next-app:dev: ○ Compiling /page ...
next-app:dev: ✓ Compiled /page in 2.5s (811 modules)
next-app:dev: Warning: Container: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
next-app:dev: at Container (webpack-internal:///(ssr)/../../packages/ui/components/Container.tsx:10:22)
next-app:dev: at Hero
next-app:dev: at main
next-app:dev: at HomePage (webpack-internal:///(ssr)/./src/app/page.tsx:25:78)
next-app:dev: at StaticGenerationSearchParamsBailoutProvider (webpack-internal:///(ssr)/../../node_modules/next/dist/client/components/static-generation-searchparams-bailout-provider.js:15:11)
next-app:dev: at Lazy
next-app:dev: at InnerLayoutRouter (webpack-internal:///(ssr)/../../node_modules/next/dist/client/components/layout-router.js:240:11)
next-app:dev: at RedirectErrorBoundary (webpack-internal:///(ssr)/../../node_modules/next/dist/client/components/redirect-boundary.js:71:9)
next-app:dev: at RedirectBoundary (webpack-internal:///(ssr)/../../node_modules/next/dist/client/components/redirect-boundary.js:79:11)
next-app:dev: at NotFoundErrorBoundary (webpack-internal:///(ssr)/../../node_modules/next/dist/client/components/not-found-boundary.js:54:9)
next-app:dev: at NotFoundBoundary (webpack-internal:///(ssr)/../../node_modules/next/dist/client/components/not-found-boundary.js:62:11)
next-app:dev: at LoadingBoundary (webpack-internal:///(ssr)/../../node_modules/next/dist/client/components/layout-router.js:336:11)
next-app:dev: at ErrorBoundary (webpack-internal:///(ssr)/../../node_modules/next/dist/client/components/error-boundary.js:128:11)
next-app:dev: at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/../../node_modules/next/dist/client/components/layout-router.js:152:9)
next-app:dev: at ScrollAndFocusHandler (webpack-internal:///(ssr)/../../node_modules/next/dist/client/components/layout-router.js:227:11)
next-app:dev: at RenderFromTemplateContext (webpack-internal:///(ssr)/../../node_modules/next/dist/client/components/render-from-template-context.js:15:44)
next-app:dev: at Lazy
next-app:dev: at OuterLayoutRouter (webpack-internal:///(ssr)/../../node_modules/next/dist/client/components/layout-router.js:345:11)
next-app:dev: at Lazy
next-app:dev: at main
next-app:dev: at body
next-app:dev: at SessionAuth (webpack-internal:///(ssr)/../../node_modules/supertokens-auth-react/lib/build/index2.js:857:23)
next-app:dev: at UserContextProvider (webpack-internal:///(ssr)/../../node_modules/supertokens-auth-react/lib/build/index2.js:69:23)
next-app:dev: at UserContextWrapper (webpack-internal:///(ssr)/../../node_modules/supertokens-auth-react/lib/build/index2.js:820:15)
next-app:dev: at SessionAuthWrapper (webpack-internal:///(ssr)/../../node_modules/supertokens-auth-react/lib/build/index2.js:1243:34)
next-app:dev: at SuperTokensWrapper
next-app:dev: at SuperTokensProvider (webpack-internal:///(ssr)/./src/app/ui/supertokensProvider.tsx:22:32)
next-app:dev: at Lazy
next-app:dev: at html
next-app:dev: at RedirectErrorBoundary (webpack-internal:///(ssr)/../../node_modules/next/dist/client/components/redirect-boundary.js:71:9)
next-app:dev: at RedirectBoundary (webpack-internal:///(ssr)/../../node_modules/next/dist/client/components/redirect-boundary.js:79:11)
next-app:dev: at ReactDevOverlay (webpack-internal:///(ssr)/../../node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)
next-app:dev: at HotReload (webpack-internal:///(ssr)/../../node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:298:11)
next-app:dev: at Router (webpack-internal:///(ssr)/../../node_modules/next/dist/client/components/app-router.js:154:11)
next-app:dev: at ErrorBoundaryHandler (webpack-internal:///(ssr)/../../node_modules/next/dist/client/components/error-boundary.js:99:9)
next-app:dev: at ErrorBoundary (webpack-internal:///(ssr)/../../node_modules/next/dist/client/components/error-boundary.js:128:11)
next-app:dev: at AppRouter (webpack-internal:///(ssr)/../../node_modules/next/dist/client/components/app-router.js:426:13)
next-app:dev: at Lazy
next-app:dev: at Lazy
next-app:dev: at /Users/t00944/work/nextjs-native-starter/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:374733
next-app:dev: at /Users/t00944/work/nextjs-native-starter/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:374733
next-app:dev: at ServerInsertedHTMLProvider (/Users/t00944/work/nextjs-native-starter/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:38:23140)
next-app:dev: ✓ Compiled in 359ms (404 modules)
next-web:dev: ○ Compiling /page ...
next-web:dev: ✓ Compiled /page in 2.3s (757 modules)
ここで、実行ログに記載されてる http://localhost:3000 にアクセスすると、以下のような画面が表示される。
これがおそらくPC版？
ここからは nextjs-native-starter リポジトリのREADMEのHOW TO USEを参照しながらやった
iOS
For iOS: go to the `next-app` folder and run `pnpm build` and `pnpm open:ios`.
とあるので、 pnpm -> yarn に置き換えて実行
$ yarn build
yarn run v1.22.19
$ next build && npx cap sync ios && npx cap sync android
▲ Next.js 14.0.0
✓ Creating an optimized production build
✓ Compiled successfully
./src/app/page.tsx
40:6 Warning: React Hook useEffect has a missing dependency: 'router'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
✓ Linting and checking validity of types
✓ Collecting page data
Generating static pages (0/9) [ ] ⚠ Entire page /auth/callback/google deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /auth/callback/google
Generating static pages (5/9) [= ]
⚠ Entire page /auth/callback/apple deopted into client-side rendering. https:/
✓ Generating static pages (9/9)
✓ Finalizing page optimization
Route (app) Size First Load JS
┌ ○ / 2.37 kB 108 kB
├ ○ /_not-found 874 B 88.8 kB
├ ○ /auth/callback/apple 2.07 kB 227 kB
├ ○ /auth/callback/google 2.07 kB 227 kB
├ ○ /login 188 B 251 kB
├ ○ /login-result 2.54 kB 228 kB
└ ○ /register 16.9 kB 268 kB
+ First Load JS shared by all 87.9 kB
├ chunks/1dd3208c-59a38ab4f4d458ab.js 53.3 kB
├ chunks/53-ea01855999212081.js 32.5 kB
├ chunks/main-app-9ad46d6a8ca641ae.js 230 B
└ chunks/webpack-5bf40e569296600d.js 1.9 kB
○ (Static) prerendered as static HTML
[warn] The bundledWebRuntime configuration option has been deprecated. Can be
safely deleted.
✔ Copying web assets from out to ios/App/App/public in 17.28ms
✔ Creating capacitor.config.json in ios/App/App in 617.58μs
✔ copy ios in 24.00ms
✔ Updating iOS plugins in 649.75μs
[info] Found 3 Capacitor plugins for ios:
@capacitor/app@5.0.6
@capacitor/preferences@5.0.6
@capacitor/splash-screen@5.0.6
✔ Updating iOS native dependencies with pod install in 21.43s
✔ update ios in 21.46s
[info] Sync finished in 23.354s
[?] Would you like to help improve Capacitor by sharing anonymous usage data? 💖
Read more about what is being collected and why here:
https://capacitorjs.com/telemetry. You can change your mind at any time by
using the npx cap telemetry command.
✔ Share anonymous usage data? … yes
Thank you for helping to make Capacitor better! 💖
Information about the data we collect is available on our website: https://capacitorjs.com/telemetry
[warn] The bundledWebRuntime configuration option has been deprecated. Can be
safely deleted.
✔ Copying web assets from out to android/app/src/main/assets/public in 24.70ms
✔ Creating capacitor.config.json in android/app/src/main/assets in 750.17μs
✔ copy android in 30.07ms
✔ Updating Android plugins in 757.29μs
[info] Found 3 Capacitor plugins for android:
@capacitor/app@5.0.6
@capacitor/preferences@5.0.6
@capacitor/splash-screen@5.0.6
✔ update android in 23.71ms
[info] Sync finished in 0.056s
✨ Done in 25.25s.
ビルドが終わったようなので、 yarn open:ios を実行
$ yarn open:ios
yarn run v1.22.19
$ npx cap sync ios && npx cap open ios
[warn] The bundledWebRuntime configuration option has been deprecated. Can be
safely deleted.
✔ Copying web assets from out to ios/App/App/public in 38.04ms
✔ Creating capacitor.config.json in ios/App/App in 746.13μs
✔ copy ios in 44.72ms
✔ Updating iOS plugins in 578.29μs
[info] Found 3 Capacitor plugins for ios:
@capacitor/app@5.0.6
@capacitor/preferences@5.0.6
@capacitor/splash-screen@5.0.6
✔ Updating iOS native dependencies with pod install in 5.60s
✔ update ios in 5.63s
[info] Sync finished in 6.93s
✔ Opening the Xcode workspace... in 3.01s
✨ Done in 11.91s.
すると、Xcodeが起動するので、 Run を実行すると、シミュレータが起動して、以下のような画面が表示される。
PC版で作成したGoogleアカウントでログインしてみると、
Android
for Android: go to the `next-app` folder and run `pnpm build` and `pnpm open:android`
とあるので、 pnpm -> yarn に置き換えて実行
すでに yarn build でビルドしてるので、 yarn open:android を実行
AndroidStudioが開くところまではきたけど、、、、構成追加とかして実行してもなんか動かずでした💦😭
まとめ
- React Nativeっぽい感じで、Next.jsを使ってる感じはわかった
- SuperTokens, Open Source Authenticationという認証ライブラリを使ってる
- Capacitorを利用してNext.jsで作ったアプリをネイティブで動作するようにしてるみたい
- 今回は、iOSのみ動作確認できた