diff --git a/examples/cms-strapi/.env.local.example b/examples/cms-strapi/.env.local.example deleted file mode 100644 index 684a7376e330..000000000000 --- a/examples/cms-strapi/.env.local.example +++ /dev/null @@ -1,2 +0,0 @@ -STRAPI_PREVIEW_SECRET= -NEXT_PUBLIC_STRAPI_API_URL=http://localhost:1337 \ No newline at end of file diff --git a/examples/cms-strapi/.gitignore b/examples/cms-strapi/.gitignore deleted file mode 100644 index c87c9b392c02..000000000000 --- a/examples/cms-strapi/.gitignore +++ /dev/null @@ -1,36 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# next.js -/.next/ -/out/ - -# production -/build - -# misc -.DS_Store -*.pem - -# debug -npm-debug.log* -yarn-debug.log* -yarn-error.log* -.pnpm-debug.log* - -# local env files -.env*.local - -# vercel -.vercel - -# typescript -*.tsbuildinfo -next-env.d.ts diff --git a/examples/cms-strapi/README.md b/examples/cms-strapi/README.md index 546964f9a94f..e7da4fa263ac 100644 --- a/examples/cms-strapi/README.md +++ b/examples/cms-strapi/README.md @@ -1,153 +1,3 @@ -# A statically generated blog example using Next.js and Strapi +## Deprecated -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. - -## Demo - -[https://next-blog-strapi.vercel.app/](https://next-blog-strapi.vercel.app/) - -## Deploy your own - -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): - -[![Deploy with Vercel](https://vercel.com/button)](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) - -### Related examples - -- [WordPress](/examples/cms-wordpress) -- [DatoCMS](/examples/cms-datocms) -- [Sanity](/examples/cms-sanity) -- [TakeShape](/examples/cms-takeshape) -- [Prismic](/examples/cms-prismic) -- [Contentful](/examples/cms-contentful) -- [Agility CMS](/examples/cms-agilitycms) -- [Cosmic](/examples/cms-cosmic) -- [ButterCMS](/examples/cms-buttercms) -- [Storyblok](/examples/cms-storyblok) -- [GraphCMS](/examples/cms-graphcms) -- [Kontent](/examples/cms-kontent) -- [Ghost](/examples/cms-ghost) -- [Umbraco Heartcore](/examples/cms-umbraco-heartcore) -- [Blog Starter](/examples/blog-starter) -- [Builder.io](/examples/cms-builder-io) -- [DotCMS](/examples/cms-dotcms) -- [Enterspeed](/examples/cms-enterspeed) - -## How to use - -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: - -```bash -npx create-next-app --example cms-strapi cms-strapi-app -``` - -```bash -yarn create next-app --example cms-strapi cms-strapi-app -``` - -```bash -pnpm create next-app --example cms-strapi cms-strapi-app -``` - -## Configuration - -### Step 1. Set up Strapi locally - -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 - -```bash -npx create-strapi-app@3 my-project --template next-example --quickstart -# or: yarn create strapi-app@3 my-project --template next-example --quickstart -npm run develop # or: yarn develop -``` - -This will open http://localhost:1337/ and prompt you to create an admin user. - -After you sign in there should already be data for **Authors** and **Posts**. If you want to add more entries, just do the following: - -Select **Author** and click **Add New Author**. - -- Use dummy data for the name. -- For the image, you can download one from [Unsplash](https://unsplash.com/). - -Next, select **Posts** and click **Add New Post**. - -- Use dummy data for the text. -- You can write markdown for the **content** field. -- For the images, you can download ones from [Unsplash](https://unsplash.com/). -- Pick the **Author** you created earlier. -- Set the **status** field to be **published**. - -### Step 2. Set up environment variables - -While the Strapi server is running, open a new terminal and `cd` into the Next.js app directory you created earlier. - -``` -cd cms-strapi-app -``` - -Copy the `.env.local.example` file in this directory to `.env.local` (which will be ignored by Git): - -```bash -cp .env.local.example .env.local -``` - -Then set each variable on `.env.local`: - -- `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). -- `NEXT_PUBLIC_STRAPI_API_URL` should be set as `http://localhost:1337` (no trailing slash). - -### Step 3. Run Next.js in development mode - -Make sure that the local Strapi server is still running at http://localhost:1337. Inside the Next.js app directory, run: - -```bash -npm install -npm run dev - -# or - -yarn install -yarn dev -``` - -Your blog should be up and running on [http://localhost:3000](http://localhost:3000)! - -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). - -### Step 4. Try preview mode - -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)). - -To enable the Preview Mode, go to this URL: - -``` -http://localhost:3000/api/preview?secret=&slug=draft -``` - -- `` should be the string you entered for `STRAPI_PREVIEW_SECRET`. -- `` should be the post's `slug` attribute. - -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. - -To add more preview pages, create a post and set the **status** as `draft`. - -### Step 5. Deploy Strapi - -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)). - -### Step 6. Deploy on Vercel - -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)). - -#### Deploy Your Local Project - -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). - -**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file. - -#### Deploy from Our Template - -Alternatively, you can deploy using our template by clicking on the Deploy button below. - -[![Deploy with Vercel](https://vercel.com/button)](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) +The Strapi CMS example is deprecated. Please check out [Strapi’s official demo application](https://github.com/strapi/foodadvisor/). diff --git a/examples/cms-strapi/components/alert.js b/examples/cms-strapi/components/alert.js deleted file mode 100644 index d74bcf69bde4..000000000000 --- a/examples/cms-strapi/components/alert.js +++ /dev/null @@ -1,42 +0,0 @@ -import Container from './container' -import cn from 'classnames' -import { EXAMPLE_PATH } from '@/lib/constants' - -export default function Alert({ preview }) { - return ( -
- -
- {preview ? ( - <> - This page is a preview.{' '} - - Click here - {' '} - to exit preview mode. - - ) : ( - <> - The source code for this blog is{' '} - - available on GitHub - - . - - )} -
- -
- ) -} diff --git a/examples/cms-strapi/components/avatar.js b/examples/cms-strapi/components/avatar.js deleted file mode 100644 index 0546faa56d4b..000000000000 --- a/examples/cms-strapi/components/avatar.js +++ /dev/null @@ -1,21 +0,0 @@ -import Image from 'next/image' - -export default function Avatar({ name, picture }) { - const url = picture.url ?? picture[0].url - - return ( -
-
- {name} -
-
{name}
-
- ) -} diff --git a/examples/cms-strapi/components/container.js b/examples/cms-strapi/components/container.js deleted file mode 100644 index fc1c29dfb074..000000000000 --- a/examples/cms-strapi/components/container.js +++ /dev/null @@ -1,3 +0,0 @@ -export default function Container({ children }) { - return
{children}
-} diff --git a/examples/cms-strapi/components/cover-image.js b/examples/cms-strapi/components/cover-image.js deleted file mode 100644 index a9f3502cd898..000000000000 --- a/examples/cms-strapi/components/cover-image.js +++ /dev/null @@ -1,32 +0,0 @@ -import cn from 'classnames' -import Image from 'next/image' -import Link from 'next/link' - -export default function CoverImage({ title, url, slug }) { - const imageUrl = `${ - url.startsWith('/') ? process.env.NEXT_PUBLIC_STRAPI_API_URL : '' - }${url}` - - const image = ( - {`Cover - ) - return ( -
- {slug ? ( - - {image} - - ) : ( - image - )} -
- ) -} diff --git a/examples/cms-strapi/components/date.js b/examples/cms-strapi/components/date.js deleted file mode 100644 index eac5681378bf..000000000000 --- a/examples/cms-strapi/components/date.js +++ /dev/null @@ -1,6 +0,0 @@ -import { parseISO, format } from 'date-fns' - -export default function Date({ dateString }) { - const date = parseISO(dateString) - return -} diff --git a/examples/cms-strapi/components/footer.js b/examples/cms-strapi/components/footer.js deleted file mode 100644 index b305c3eb40b0..000000000000 --- a/examples/cms-strapi/components/footer.js +++ /dev/null @@ -1,30 +0,0 @@ -import Container from './container' -import { EXAMPLE_PATH } from '@/lib/constants' - -export default function Footer() { - return ( - - ) -} diff --git a/examples/cms-strapi/components/header.js b/examples/cms-strapi/components/header.js deleted file mode 100644 index 05cb9af247f7..000000000000 --- a/examples/cms-strapi/components/header.js +++ /dev/null @@ -1,12 +0,0 @@ -import Link from 'next/link' - -export default function Header() { - return ( -

- - Blog - - . -

- ) -} diff --git a/examples/cms-strapi/components/hero-post.js b/examples/cms-strapi/components/hero-post.js deleted file mode 100644 index f1c03985b2db..000000000000 --- a/examples/cms-strapi/components/hero-post.js +++ /dev/null @@ -1,37 +0,0 @@ -import Avatar from './avatar' -import Date from './date' -import CoverImage from './cover-image' -import Link from 'next/link' - -export default function HeroPost({ - title, - coverImage, - date, - excerpt, - author, - slug, -}) { - return ( -
-
- -
-
-
-

- - {title} - -

-
- -
-
-
-

{excerpt}

- -
-
-
- ) -} diff --git a/examples/cms-strapi/components/intro.js b/examples/cms-strapi/components/intro.js deleted file mode 100644 index c3003c619664..000000000000 --- a/examples/cms-strapi/components/intro.js +++ /dev/null @@ -1,28 +0,0 @@ -import { CMS_NAME, CMS_URL } from '@/lib/constants' - -export default function Intro() { - return ( -
-

- Blog. -

-

- A statically generated blog example using{' '} - - Next.js - {' '} - and{' '} - - {CMS_NAME} - - . -

-
- ) -} diff --git a/examples/cms-strapi/components/layout.js b/examples/cms-strapi/components/layout.js deleted file mode 100644 index 399802b095aa..000000000000 --- a/examples/cms-strapi/components/layout.js +++ /dev/null @@ -1,16 +0,0 @@ -import Alert from './alert' -import Footer from './footer' -import Meta from './meta' - -export default function Layout({ preview, children }) { - return ( - <> - -
- -
{children}
-
-