|
1 |
| -# A statically generated blog example using Next.js and Strapi |
| 1 | +## Deprecated |
2 | 2 |
|
3 |
| -This example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using [Strapi](https://strapi.io/) as the data source. |
4 |
| - |
5 |
| -## Demo |
6 |
| - |
7 |
| -[https://next-blog-strapi.vercel.app/](https://next-blog-strapi.vercel.app/) |
8 |
| - |
9 |
| -## Deploy your own |
10 |
| - |
11 |
| -Once you have access to [the environment variables you'll need](#step-7-set-up-environment-variables), deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): |
12 |
| - |
13 |
| -[](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/cms-strapi&project-name=cms-strapi&repository-name=cms-strapi&env=STRAPI_PREVIEW_SECRET,NEXT_PUBLIC_STRAPI_API_URL&envDescription=Required%20to%20connect%20the%20app%20with%20Strapi&envLink=https://vercel.link/cms-strapi-env) |
14 |
| - |
15 |
| -### Related examples |
16 |
| - |
17 |
| -- [WordPress](/examples/cms-wordpress) |
18 |
| -- [DatoCMS](/examples/cms-datocms) |
19 |
| -- [Sanity](/examples/cms-sanity) |
20 |
| -- [TakeShape](/examples/cms-takeshape) |
21 |
| -- [Prismic](/examples/cms-prismic) |
22 |
| -- [Contentful](/examples/cms-contentful) |
23 |
| -- [Agility CMS](/examples/cms-agilitycms) |
24 |
| -- [Cosmic](/examples/cms-cosmic) |
25 |
| -- [ButterCMS](/examples/cms-buttercms) |
26 |
| -- [Storyblok](/examples/cms-storyblok) |
27 |
| -- [GraphCMS](/examples/cms-graphcms) |
28 |
| -- [Kontent](/examples/cms-kontent) |
29 |
| -- [Ghost](/examples/cms-ghost) |
30 |
| -- [Umbraco Heartcore](/examples/cms-umbraco-heartcore) |
31 |
| -- [Blog Starter](/examples/blog-starter) |
32 |
| -- [Builder.io](/examples/cms-builder-io) |
33 |
| -- [DotCMS](/examples/cms-dotcms) |
34 |
| -- [Enterspeed](/examples/cms-enterspeed) |
35 |
| - |
36 |
| -## How to use |
37 |
| - |
38 |
| -Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example: |
39 |
| - |
40 |
| -```bash |
41 |
| -npx create-next-app --example cms-strapi cms-strapi-app |
42 |
| -``` |
43 |
| - |
44 |
| -```bash |
45 |
| -yarn create next-app --example cms-strapi cms-strapi-app |
46 |
| -``` |
47 |
| - |
48 |
| -```bash |
49 |
| -pnpm create next-app --example cms-strapi cms-strapi-app |
50 |
| -``` |
51 |
| - |
52 |
| -## Configuration |
53 |
| - |
54 |
| -### Step 1. Set up Strapi locally |
55 |
| - |
56 |
| -Use the provided [Strapi template Next example](https://github.com/strapi/strapi-template-next-example) to run a pre-configured Strapi project locally. See the [Strapi template docs](https://strapi.io/documentation/developer-docs/latest/setup-deployment-guides/installation/templates.html#templates) for more information |
57 |
| - |
58 |
| -```bash |
59 |
| -npx create-strapi-app@3 my-project --template next-example --quickstart |
60 |
| -# or: yarn create strapi-app@3 my-project --template next-example --quickstart |
61 |
| -npm run develop # or: yarn develop |
62 |
| -``` |
63 |
| - |
64 |
| -This will open http://localhost:1337/ and prompt you to create an admin user. |
65 |
| - |
66 |
| -After you sign in there should already be data for **Authors** and **Posts**. If you want to add more entries, just do the following: |
67 |
| - |
68 |
| -Select **Author** and click **Add New Author**. |
69 |
| - |
70 |
| -- Use dummy data for the name. |
71 |
| -- For the image, you can download one from [Unsplash](https://unsplash.com/). |
72 |
| - |
73 |
| -Next, select **Posts** and click **Add New Post**. |
74 |
| - |
75 |
| -- Use dummy data for the text. |
76 |
| -- You can write markdown for the **content** field. |
77 |
| -- For the images, you can download ones from [Unsplash](https://unsplash.com/). |
78 |
| -- Pick the **Author** you created earlier. |
79 |
| -- Set the **status** field to be **published**. |
80 |
| - |
81 |
| -### Step 2. Set up environment variables |
82 |
| - |
83 |
| -While the Strapi server is running, open a new terminal and `cd` into the Next.js app directory you created earlier. |
84 |
| - |
85 |
| -``` |
86 |
| -cd cms-strapi-app |
87 |
| -``` |
88 |
| - |
89 |
| -Copy the `.env.local.example` file in this directory to `.env.local` (which will be ignored by Git): |
90 |
| - |
91 |
| -```bash |
92 |
| -cp .env.local.example .env.local |
93 |
| -``` |
94 |
| - |
95 |
| -Then set each variable on `.env.local`: |
96 |
| - |
97 |
| -- `STRAPI_PREVIEW_SECRET` can be any random string (but avoid spaces), like `MY_SECRET` - this is used for [Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode). |
98 |
| -- `NEXT_PUBLIC_STRAPI_API_URL` should be set as `http://localhost:1337` (no trailing slash). |
99 |
| - |
100 |
| -### Step 3. Run Next.js in development mode |
101 |
| - |
102 |
| -Make sure that the local Strapi server is still running at http://localhost:1337. Inside the Next.js app directory, run: |
103 |
| - |
104 |
| -```bash |
105 |
| -npm install |
106 |
| -npm run dev |
107 |
| - |
108 |
| -# or |
109 |
| - |
110 |
| -yarn install |
111 |
| -yarn dev |
112 |
| -``` |
113 |
| - |
114 |
| -Your blog should be up and running on [http://localhost:3000](http://localhost:3000)! |
115 |
| - |
116 |
| -The best place to debug is inside the `fetchAPI` function in `lib/api.js`. If you need help, you can post on [GitHub discussions](https://github.com/vercel/next.js/discussions). |
117 |
| - |
118 |
| -### Step 4. Try preview mode |
119 |
| - |
120 |
| -If you go to the `/posts/draft` page on localhost, you won't see this post because it’s not published. However, if you use the **Preview Mode**, you'll be able to see the change ([Documentation](https://nextjs.org/docs/advanced-features/preview-mode)). |
121 |
| - |
122 |
| -To enable the Preview Mode, go to this URL: |
123 |
| - |
124 |
| -``` |
125 |
| -http://localhost:3000/api/preview?secret=<secret>&slug=draft |
126 |
| -``` |
127 |
| - |
128 |
| -- `<secret>` should be the string you entered for `STRAPI_PREVIEW_SECRET`. |
129 |
| -- `<slug>` should be the post's `slug` attribute. |
130 |
| - |
131 |
| -You should now be able to see the draft post. To exit the preview mode, you can click **Click here to exit preview mode** at the top. |
132 |
| - |
133 |
| -To add more preview pages, create a post and set the **status** as `draft`. |
134 |
| - |
135 |
| -### Step 5. Deploy Strapi |
136 |
| - |
137 |
| -To deploy to production, you must first deploy your Strapi app. The Strapi app for our demo at https://next-blog-strapi.vercel.app/ is deployed to Heroku ([here’s the documentation](https://strapi.io/documentation/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/heroku.html)) and uses Cloudinary for image hosting ([see this file](https://github.com/strapi/strapi-starter-next-blog/blob/23b184781a3f219ad472f6a2c3a3d239a3d16513/backend/extensions/upload/config/settings.js)). |
138 |
| - |
139 |
| -### Step 6. Deploy on Vercel |
140 |
| - |
141 |
| -You can deploy this app to the cloud with [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). |
142 |
| - |
143 |
| -#### Deploy Your Local Project |
144 |
| - |
145 |
| -To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [import to Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example). |
146 |
| - |
147 |
| -**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file. |
148 |
| - |
149 |
| -#### Deploy from Our Template |
150 |
| - |
151 |
| -Alternatively, you can deploy using our template by clicking on the Deploy button below. |
152 |
| - |
153 |
| -[](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/cms-strapi&project-name=cms-strapi&repository-name=cms-strapi&env=STRAPI_PREVIEW_SECRET,NEXT_PUBLIC_STRAPI_API_URL&envDescription=Required%20to%20connect%20the%20app%20with%20Strapi&envLink=https://vercel.link/cms-strapi-env) |
| 3 | +The Strapi CMS example is deprecated. Please check out [Strapi’s official demo application](https://github.com/strapi/foodadvisor/). |
0 commit comments