Deployment to Vercel using Shopify framework not working

[aaronmarkle]

Hello, I have the nextjs commerce with Shopify framework working locally, but when I deploy to Vercel, I get a 404 on the index page (and any other page I try).

The app works when I run it locally for development.

The deployment in Vercel seems to be working, no errors, it says it generated ~500 pages. But all urls seems to return a 404 error. Any advice on where to start looking to see what is causing this to go wrong? (This is my first deployment to Vercel).

When I turn on build outputs, some of the public images are able to be rendered, but I don't see any page structure or folders. Screenshots attached.

Thanks in advance.

15:16:50.485	Cloning github.com/aaronmarkle/meetlofta (Branch: main, Commit: 918bdcf)
15:16:50.985	Cloning completed: 499.918ms
15:16:51.070	Analyzing source code...
15:16:52.718	Installing build runtime...
15:16:55.551	Build runtime installed: 2.832s
15:16:59.070	Looking up build cache...
15:16:59.548	Build cache found. Downloading...
15:17:04.173	Build cache downloaded [76.84 MB]: 4624.696ms
15:17:05.583	Detected package.json
15:17:05.583	Installing dependencies...
15:17:06.025	yarn install v1.22.10
15:17:06.126	[1/5] Validating package.json...
15:17:06.130	[2/5] Resolving packages...
15:17:06.607	success Already up-to-date.
15:17:06.618	Done in 0.60s.
15:17:06.884	Running "yarn run build"
15:17:07.111	yarn run v1.22.10
15:17:07.156	$ next build
15:17:08.825	next.config.js {
15:17:08.826	"commerce": {
15:17:08.826	"provider": "shopify",
15:17:08.826	"features": {
15:17:08.826	"wishlist": false,
15:17:08.826	"customCheckout": false
15:17:08.826	}
15:17:08.826	},
15:17:08.826	"images": {
15:17:08.826	"domains": [
15:17:08.826	"cdn.shopify.com"
15:17:08.827	]
15:17:08.827	},
15:17:08.827	"i18n": {
15:17:08.827	"locales": [
15:17:08.827	"en-US",
15:17:08.827	"es"
15:17:08.827	],
15:17:08.827	"defaultLocale": "en-US"
15:17:08.827	},
15:17:08.827	"env": {}
15:17:08.828	}
15:17:08.831	info - Creating an optimized production build...
15:17:08.853	Attention: Next.js now collects completely anonymous telemetry regarding usage.
15:17:08.854	This information is used to shape Next.js' roadmap and prioritize features.
15:17:08.854	You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
15:17:08.854	https://nextjs.org/telemetry
15:18:03.843	info - Compiled successfully
15:18:03.843	info - Collecting page data...
15:18:05.632	info - Generating static pages (0/642)
15:18:19.819	info - Generating static pages (160/642)
15:18:33.945	info - Generating static pages (320/642)
15:18:44.625	info - Generating static pages (481/642)
15:18:54.819	info - Generating static pages (642/642)
15:18:54.819	info - Finalizing page optimization...
15:18:55.188	Page Size First Load JS
15:18:55.188	┌ ● / 6.35 kB 123 kB
15:18:55.188	├ └ css/23e8f0e913cc99457de5.css 367 B
15:18:55.188	├ /_app 0 B 75.5 kB
15:18:55.188	├ ● /[...pages] 904 B 117 kB
15:18:55.188	├ ├ /en-US/faqs
15:18:55.188	├ ├ /en-US/contact
15:18:55.188	├ ├ /en-US/about-lofta
15:18:55.188	├ └ [+57 more paths]
15:18:55.188	├ ○ /404 1.21 kB 76.7 kB
15:18:55.189	├ λ /api/bigcommerce/cart 0 B 75.5 kB
15:18:55.189	├ λ /api/bigcommerce/catalog/products 0 B 75.5 kB
15:18:55.189	├ λ /api/bigcommerce/checkout 0 B 75.5 kB
15:18:55.189	├ λ /api/bigcommerce/customers 0 B 75.5 kB
15:18:55.189	├ λ /api/bigcommerce/customers/login 0 B 75.5 kB
15:18:55.189	├ λ /api/bigcommerce/customers/logout 0 B 75.5 kB
15:18:55.189	├ λ /api/bigcommerce/customers/signup 0 B 75.5 kB
15:18:55.189	├ λ /api/bigcommerce/wishlist 0 B 75.5 kB
15:18:55.189	├ ● /blog 1.6 kB 118 kB
15:18:55.189	├ └ css/116585baa9a7df168def.css 2.34 kB
15:18:55.189	├ ● /cart 2.27 kB 119 kB
15:18:55.189	├ └ css/a4c440a09d12b8b1f855.css 2.46 kB
15:18:55.189	├ ● /orders 1.13 kB 117 kB
15:18:55.190	├ ● /product/[slug] 8.3 kB 125 kB
15:18:55.190	├ └ css/8f8ef166f988d7b585af.css 3.61 kB
15:18:55.190	├ ├ /en-US/product/resmed-airmini
15:18:55.190	├ ├ /en-US/product/airfit-n20
15:18:55.190	├ ├ /en-US/product/airmini-p10-setup-pack
15:18:55.190	├ └ [+559 more paths]
15:18:55.190	├ ● /profile 1.01 kB 117 kB
15:18:55.190	├ ● /search 4.91 kB 121 kB
15:18:55.190	├ └ css/4e539336dca3abd22a0d.css 322 B
15:18:55.190	└ ● /wishlist 2.35 kB 119 kB
15:18:55.190	└ css/2c7dc9262a70511ba268.css 2.6 kB
15:18:55.190	+ First Load JS shared by all 75.5 kB
15:18:55.190	├ chunks/7c9866dc95f4198ab08b1af9cab34b96bdd64c02.da057a.js 2.36 kB
15:18:55.191	├ chunks/commons.a1861c.js 19.3 kB
15:18:55.191	├ chunks/framework.881ce0.js 42.3 kB
15:18:55.191	├ chunks/main.93fc7f.js 6.48 kB
15:18:55.191	├ chunks/pages/_app.c3e886.js 3.51 kB
15:18:55.191	├ chunks/webpack.0d77af.js 1.57 kB
15:18:55.191	└ css/55bc2ae84ac6a05baa15.css 4.96 kB
15:18:55.191	λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
15:18:55.191	○ (Static) automatically rendered as static HTML (uses no initial props)
15:18:55.191	● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
15:18:55.191	(ISR) incremental static regeneration (uses revalidate in getStaticProps)
15:18:55.415	Done in 108.31s.
15:18:56.225	Uploading build outputs...
15:18:56.225	Deploying build outputs...
15:19:02.991	Build completed. Populating build cache...
15:19:21.316	Uploading build cache [76.84 MB]...
15:19:26.611	Build cache uploaded: 5.294s
15:19:27.134	Done with "package.json"

[hayanisaid]

I have the same issue!

[hayanisaid]

My solution:

This worked for me, in your Vercel Dashboard select Nexjs as target in the "Framework Preset" field instead of allowing to be detected automatically!

[aaronmarkle]

Thanks @hayanisaid that worked for me as well. Cheers!