Skip to content

⚙️Setting: PWA 설정 및 모바일(iOS/Android) 웹앱 환경 설정 추가 #147

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
skyblue1232 merged 3 commits into from
Nov 16, 2025
Merged

⚙️Setting: PWA 설정 및 모바일(iOS/Android) 웹앱 환경 설정 추가 #147

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
68f5a28
settng/next-pwa
skyblue1232 Nov 16, 2025
7dc993d
Merge branch 'develop' into refactor/#135/web-app-accessibility
skyblue1232 Nov 16, 2025
e482655
fix/icon
skyblue1232 Nov 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 11 additions & 2 deletions next.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import path from 'path';
import type { NextConfig } from 'next';
import withPWA from 'next-pwa';

const ICON_DIR = path.resolve(__dirname, 'src/shared/icons/source');

const nextConfig: NextConfig = {
const baseConfig: NextConfig = {
reactStrictMode: true,

async redirects() {
Expand Down Expand Up @@ -36,6 +37,7 @@ const nextConfig: NextConfig = {
// @ts-ignore
(rule) => rule.test && rule.test.test && rule.test.test('.svg'),
);

if (svgRule) {
// @ts-ignore
svgRule.exclude = [...(svgRule.exclude || []), ICON_DIR];
Expand All @@ -59,4 +61,11 @@ const nextConfig: NextConfig = {
},
};

export default nextConfig;
const withPWABundle = withPWA({
dest: 'public',
register: true,
skipWaiting: true,
buildExcludes: [/dynamic-css-manifest\.json$/],
});

export default withPWABundle(baseConfig);
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"jwt-decode": "^4.0.0",
"lottie-react": "^2.4.1",
"next": "15.5.4",
"next-pwa": "^5.6.0",
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

next-pwa 버전 호환성 및 최신 버전 확인 필요

next-pwa ^5.6.0은 상당히 오래된 버전이며, 현재 사용 중인 Next.js 15.5.4와의 호환성이 보장되지 않을 수 있습니다. Next.js 15는 next-pwa v5와 호환되지 않을 가능성이 높으며, 대신 @ducanh2912/next-pwa 같은 커뮤니티 포크를 사용해야 할 수 있습니다.

다음 스크립트로 최신 버전 정보와 Next.js 15 호환성을 확인해주세요:

웹에서도 관련 정보를 확인해주세요:

🏁 Script executed:

#!/bin/bash
# next-pwa의 최신 버전 및 Next.js 15 호환성 확인

echo "=== next-pwa 최신 버전 확인 ==="
npm view next-pwa version time

echo -e "\n=== @ducanh2912/next-pwa (Next.js 13+ 호환 포크) 확인 ==="
npm view @ducanh2912/next-pwa version time

echo -e "\n=== package.json의 Next.js 버전 확인 ==="
cat package.json | grep -A2 '"next"'

Length of output: 7715

🌐 Web query:

Does next-pwa version 5.6.0 support Next.js 15?

💡 Result:

Short answer: No official support — next-pwa v5.6.0 was published years before Next.js 15 and is not listed as compatible with Next 15. See the package/GitHub metadata (last publish ~3 years ago) and project repo. [1][2][3]

If you need help testing compatibility or a migration path (errors you're seeing), tell me the error and I’ll help troubleshoot.

Sources:

  • npm package page (next-pwa v5.6.0, last publish ~3 years ago). [1]
  • GitHub repo (next-pwa README / project). [2]
  • Snyk/npm metadata noting last-release / maintenance signal. [3]

🏁 Script executed:

#!/bin/bash
# Check actual package.json in the repository for Next.js version and PWA setup
cat package.json | grep -E '"next"|"next-pwa"' -A1 -B1

Length of output: 100

next-pwa 버전을 @ducanh2912/next-pwa로 업그레이드 필요

현재 package.json에 지정된 next-pwa ^5.6.0 (2022년 8월 릴리스, 마지막 업데이트)은 Next.js 15.5.4와 공식적으로 호환되지 않습니다. Next.js 15 지원을 위해 유지보수 중인 @ducanh2912/next-pwa v10.2.9 포크로 마이그레이션해야 합니다.

🤖 Prompt for AI Agents 
In package.json at line 21, replace the dependency "next-pwa": "^5.6.0" with the
maintained fork "@ducanh2912/next-pwa": "10.2.9" to ensure compatibility with
Next.js 15.5.4; after editing run your package manager (npm/yarn/pnpm install)
to update lockfile, then rebuild and run the app to verify no breaking config
changes are required (adjust next.config.js PWA options if any deprecation
warnings appear).

"react": "19.1.0",
"react-dom": "19.1.0",
"react-hook-form": "^7.64.0",
Expand Down
2,795 changes: 2,749 additions & 46 deletions pnpm-lock.yaml
View file
Open in desktop

Large diffs are not rendered by default.

Binary file added public/icons/icon1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/icons/icon2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/icons/icon3.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 26 additions & 0 deletions public/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{
"name": "Geulda",
"short_name": "Geulda",
"start_url": "/main",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#ffffff",
"orientation": "portrait-primary",
"icons": [
{
"src": "/icons/icon1.png",
"sizes": "64x64",
"type": "image/png"
},
{
"src": "/icons/icon2.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon3.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
26 changes: 21 additions & 5 deletions src/pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import '@/styles/globals.css';
import '@/shared/icons';
import { useState } from 'react';
import Head from 'next/head';
import type { AppProps } from 'next/app';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import AppLayout from '@/shared/layout/AppLayout';
Expand All @@ -18,10 +19,25 @@ export default function App({ Component, pageProps }: AppProps) {
);

return (
<QueryClientProvider client={queryClient}>
<AppLayout>
<Component {...pageProps} />
</AppLayout>
</QueryClientProvider>
<>
<Head>
{/* PWA 설정 */}
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#ffffff" />
<meta name="mobile-web-app-capable" content="yes" />

{/* iOS 전용 옵션 */}
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="Geulda" />
<link rel="apple-touch-icon" href="/icons/icon3.png" />
</Head>

<QueryClientProvider client={queryClient}>
<AppLayout>
<Component {...pageProps} />
</AppLayout>
</QueryClientProvider>
</>
);
}
1 change: 1 addition & 0 deletions src/shared/types/next-pwa.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
declare module 'next-pwa';
12 changes: 10 additions & 2 deletions src/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,11 @@ html, body {

.app-wrapper {
width: 100%;
max-width: 402px;
max-width: 100%;
margin: 0 auto;
position: relative;
min-height: 100vh;
background: var(--background);
background: #ffffff;
overflow-x: hidden;
transform: translateZ(0);
}
Expand All @@ -28,6 +28,14 @@ html, body {
.app-wrapper {
width: 100%;
max-width: none;
margin: 0
}
}

@media (hover: hover) and (pointer: fine) {
.app-wrapper {
max-width: 390px;
margin: 0 auto;
}
}

Expand Down
Loading