npx create-next-app@latest --ts --tailwind shopify-nextjs
个中的 --ts 为运用程序利用ts语法，--tailwind 意思为预先配置 Tailwind CSS 以进行样式设置。 然后回答这些问题
✔ Would you like to use ESLint? … No / Yes✔ Would you like to use Tailwind CSS? … No / Yes✔ Would you like to use `src/` directory? … No / Yes✔ Would you like to use App Router? (recommended) … No / Yes✔ Would you like to customize the default import alias? … No / Yes
稍等一会,程序就安装好了。进入项目目录运行查看一下
cd shopify-nextjsnpm run dev
现在还是nextjs的默认安装成功页面,我们要轻微修正一下页面样式。 到HyperUI或者 tailwindui或者你喜好的tailwindcss模板网站上复制一下俊秀的样式:
如果你不知道有哪些免费的tailwindcss样式参考网站,可以参考我的这篇文章
下面是大略修正过的首页。
二、利用git管理项目创建一个github项目，把你的代码推送到远程 repo。
git initgit add .git commit -m "first commit"git branch -M maingit remote add origin <https://github.com/YOUR_USERNAME_HERE/GIT_LINK_HERE>git push -u origin main三、Shopify 创建运用并开启Storefront API1.创建 Shopify 互助伙伴帐户。
Shopify 互助伙伴操持可免费加入，并可让您通过无限的测试商店试用 Shopify 平台。
2.创建 Shopify 开拓商店。上岸你的Shopify 后台创建一个测试商店。
三、商店添加虚拟商品手动添加商品或者利用这个githubrepo中的数据.导入一些测试数据。
将一些产品或其他数据添加到您的新商店后，您现在就可以从 Storefront GraphQL API 检索这些数据了。
四、配置Shopify store front API1.创建运用在 Shopify 管理员中，选择>运用和发卖渠道。单击“开拓运用”。
阅读供应的警告和信息，然后单击“许可自定义运用程序开拓”, 创建运用。
2.选择 API 范围
单击配置管理 API 范围。 在管理 API 访问范围部分，选择要分配给运用程序的 API 范围。 对付此演示，至少选择“产品”下的write_products 和 read_products
3. 测试商店安装运用
在你的商店中安装刚才创建的运用
点击“保存”,单击“安装运用程序”.然后到api凭据项,你将看到api token 稍后我们会用到。
五、配置环境变量
回到代码中，在根级别创建一个文件.env.local并添加以下内容：
NEXT_PUBLIC_ACCESS_TOKEN="你的api token"六、Shopify GraphiQL 运用程序设置
点击此处安装GraphQL API 运用,在本页面 ,输入您的商店网址
要获取您的商店网址，请在管理页面中点击主页 URL 该当是这样的： https://admin.shopify.com/store/STORE_NAME_HERE
复制并粘贴您的 STORE_NAME_HERE,选择权限
单击“安装”,完成后，你该当可以在 GraphiQL 中利用以下查询
我们来测试一下，以是让我们创建一个 ProductsQuery。让我们从大略的获取产品标题开始：
query ProductsQuery { products(first: 2) { edges{ node{ title } } }}
返回结果
{ "data": { "products": { "edges": [ { "node": { "title": "7 Shakra Bracelet" } }, { "node": { "title": "Anchor Bracelet Mens" } } ] } }}
运用程序正常。
六、环境变量添加api url在.env.local 文件中添加api url
NEXT_PUBLIC_API_URL=https://{你的商店名}.myshopify.com/api/2024-07/graphql.json
2024-07为我写这篇文章的最新版本,shopfiy一年发布四个版本,后面可能版天职歧,您可以在你的GraphiQL 后台页面中查看,你可以把他修正为最新版本。
我们已经准备了好nextjs 项目要求的必要条件,下面我们在shopify-nextjs 项目中中来要求 Storefront API获取数据。
未完待续
我的博客原文 利用Nextjs14和shopify store front api创建自定义在线商城
