diff --git a/docs/advanced-features/preview-mode.md b/docs/advanced-features/preview-mode.md index c8dd261bbf69835..a1d8da4532ccd86 100644 --- a/docs/advanced-features/preview-mode.md +++ b/docs/advanced-features/preview-mode.md @@ -154,6 +154,7 @@ https:///api/preview?secret=&slug= Take a look at the following examples to learn more: - [DatoCMS Example](https://github.com/zeit/next.js/tree/canary/examples/cms-datocms) ([Demo](https://next-blog-datocms.now.sh/)) +- [TakeShape Example](https://github.com/zeit/next.js/tree/canary/examples/cms-takeshape) ([Demo](https://next-blog-takeshape.now.sh/)) - [Sanity Example](https://github.com/zeit/next.js/tree/canary/examples/cms-sanity) ([Demo](https://next-blog-sanity.now.sh/)) ## More Details diff --git a/docs/basic-features/data-fetching.md b/docs/basic-features/data-fetching.md index ef7e747cd0425fd..866c97182a57bc9 100644 --- a/docs/basic-features/data-fetching.md +++ b/docs/basic-features/data-fetching.md @@ -489,6 +489,7 @@ Take a look at the following examples to learn more: - [Blog Starter using markdown files](https://github.com/zeit/next.js/tree/canary/examples/blog-starter) ([Demo](https://next-blog-starter.now.sh/)) - [DatoCMS Example](https://github.com/zeit/next.js/tree/canary/examples/cms-datocms) ([Demo](https://next-blog-datocms.now.sh/)) +- [TakeShape Example](https://github.com/zeit/next.js/tree/canary/examples/cms-takeshape) ([Demo](https://next-blog-takeshape.now.sh/)) - [Sanity Example](https://github.com/zeit/next.js/tree/canary/examples/cms-sanity) ([Demo](https://next-blog-sanity.now.sh/)) ## Learn more diff --git a/docs/basic-features/pages.md b/docs/basic-features/pages.md index 4acc1a89f58a400..b4d908cac197c4d 100644 --- a/docs/basic-features/pages.md +++ b/docs/basic-features/pages.md @@ -248,6 +248,7 @@ Take a look at the following examples to learn more: - [Blog Starter using markdown files](https://github.com/zeit/next.js/tree/canary/examples/blog-starter) ([Demo](https://next-blog-starter.now.sh/)) - [DatoCMS Example](https://github.com/zeit/next.js/tree/canary/examples/cms-datocms) ([Demo](https://next-blog-datocms.now.sh/)) +- [TakeShape Example](https://github.com/zeit/next.js/tree/canary/examples/cms-takeshape) ([Demo](https://next-blog-takeshape.now.sh/)) - [Sanity Example](https://github.com/zeit/next.js/tree/canary/examples/cms-sanity) ([Demo](https://next-blog-sanity.now.sh/)) ## Learn more diff --git a/examples/blog-starter/README.md b/examples/blog-starter/README.md index 317abf28ea3393a..577ecf4abb2e7dd 100644 --- a/examples/blog-starter/README.md +++ b/examples/blog-starter/README.md @@ -14,6 +14,7 @@ To create the blog posts we use [`remark`](https://github.com/remarkjs/remark) a - [DatoCMS](/examples/cms-datocms) - [Sanity](/examples/cms-sanity) +- [TakeShape](/examples/cms-takeshape) ## How to use diff --git a/examples/blog-starter/package.json b/examples/blog-starter/package.json index 58dca2758b8a006..a88ffcdd58afb61 100644 --- a/examples/blog-starter/package.json +++ b/examples/blog-starter/package.json @@ -11,7 +11,7 @@ "date-fns": "2.10.0", "gray-matter": "4.0.2", "isomorphic-unfetch": "3.0.0", - "next": "9.3.0", + "next": "latest", "react": "^16.13.0", "react-dom": "^16.13.0", "remark": "11.0.2", diff --git a/examples/cms-datocms/README.md b/examples/cms-datocms/README.md index fe945583f0fc897..0af603d6d59480d 100644 --- a/examples/cms-datocms/README.md +++ b/examples/cms-datocms/README.md @@ -10,6 +10,7 @@ This example showcases Next.js's [Static Generation](https://nextjs.org/docs/bas - [Blog Starter](/examples/blog-starter) - [Sanity](/examples/cms-sanity) +- [TakeShape](/examples/cms-takeshape) ## How to use @@ -101,7 +102,7 @@ cp .env.example .env Then set each variable on `.env`: - `NEXT_EXAMPLE_CMS_DATOCMS_API_TOKEN` should be the API token you just copied. -- `NEXT_EXAMPLE_CMS_DATOCMS_PREVIEW_SECRET` can be any random string (but avoid spaces), like `MY_SECRET` - this is used for [the Preview Mode](/docs/advanced-features/preview-mode.md). +- `NEXT_EXAMPLE_CMS_DATOCMS_PREVIEW_SECRET` can be any random string (but avoid spaces), like `MY_SECRET` - this is used for [the Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode). Your `.env` file should look like this: @@ -133,7 +134,7 @@ On DatoCMS, go to one of the posts you've created and: (If it doesn't become draft, you need to go to the model settings for `Post`, go to **Additional Settings**, and turn on **Enable draft/published system**.) -Now, if you go to the post page on localhost, you won't see the updated title. However, if you use the **Preview Mode**, you'll be able to see the change ([Documentation](/docs/advanced-features/preview-mode.md)). +Now, if you go to the post page on localhost, you won't see the updated title. 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: diff --git a/examples/cms-datocms/package.json b/examples/cms-datocms/package.json index 8be37cb0d18576a..390585baf52b508 100644 --- a/examples/cms-datocms/package.json +++ b/examples/cms-datocms/package.json @@ -10,7 +10,7 @@ "classnames": "2.2.6", "date-fns": "2.10.0", "isomorphic-unfetch": "3.0.0", - "next": "9.3.0", + "next": "latest", "react": "^16.13.0", "react-datocms": "1.1.0", "react-dom": "^16.13.0", diff --git a/examples/cms-sanity/README.md b/examples/cms-sanity/README.md index 34de358f566bb15..f6c6f526578595e 100644 --- a/examples/cms-sanity/README.md +++ b/examples/cms-sanity/README.md @@ -10,6 +10,7 @@ This example showcases Next.js's [Static Generation](https://nextjs.org/docs/bas - [Blog Starter](/examples/blog-starter) - [DatoCMS](/examples/cms-datocms) +- [TakeShape](/examples/cms-takeshape) ## How to use @@ -62,7 +63,7 @@ cp .env.example .env Then set each variable on `.env`: -- `NEXT_EXAMPLE_CMS_SANITY_PREVIEW_SECRET` can be any random string (but avoid spaces), like `MY_SECRET` - this is used for [the Preview Mode](/docs/advanced-features/preview-mode.md). +- `NEXT_EXAMPLE_CMS_SANITY_PREVIEW_SECRET` can be any random string (but avoid spaces), like `MY_SECRET` - this is used for [the Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode). - `NEXT_EXAMPLE_CMS_SANITY_PROJECT_ID`: Get the `projectId` value from the `sanity.json` file created in step 2. - `NEXT_EXAMPLE_CMS_SANITY_API_TOKEN`: Copy the API token generated in the previous step. diff --git a/examples/cms-takeshape/.env.example b/examples/cms-takeshape/.env.example new file mode 100644 index 000000000000000..0be70044571a4c2 --- /dev/null +++ b/examples/cms-takeshape/.env.example @@ -0,0 +1,3 @@ +NEXT_EXAMPLE_CMS_TAKESHAPE_API_KEY= +NEXT_EXAMPLE_CMS_TAKESHAPE_PROJECT_ID= +NEXT_EXAMPLE_CMS_TAKESHAPE_PREVIEW_SECRET= \ No newline at end of file diff --git a/examples/cms-takeshape/.gitignore b/examples/cms-takeshape/.gitignore new file mode 100644 index 000000000000000..38f38049bf111e2 --- /dev/null +++ b/examples/cms-takeshape/.gitignore @@ -0,0 +1,3 @@ +.env +.now +.next \ No newline at end of file diff --git a/examples/cms-takeshape/README.md b/examples/cms-takeshape/README.md new file mode 100644 index 000000000000000..eb1467351dff920 --- /dev/null +++ b/examples/cms-takeshape/README.md @@ -0,0 +1,166 @@ +# A statically generated blog example using Next.js and TakeShape + +This example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using [TakeShape](https://www.takeshape.io/) as the data source. + +## Demo + +### [https://next-blog-takeshape.now.sh/](https://next-blog-takeshape.now.sh/) + +### Related examples + +- [Blog Starter](/examples/blog-starter) +- [DatoCMS](/examples/cms-datocms) +- [Sanity](/examples/cms-sanity) + +## How to use + +### Using `create-next-app` + +Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: + +```bash +npm init next-app --example cms-takeshape cms-takeshape-app +# or +yarn create next-app --example cms-takeshape cms-takeshape-app +``` + +### Download manually + +Download the example: + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/cms-takeshape +cd cms-takeshape +``` + +## Configuration + +### Step 1. Create an account and a project on TakeShape + +First, [create an account on TakeShape](https://www.takeshape.io/). + +After creating an account, create a **new project** from the dashboard. You can select a **Blank Project**. + +### Step 2. Create an `Author` model + +From the project settings page, create a new **content type**. + +- The title should be `Author`. + +Next, drag these widgets: + +- **Single Line** widget: Set the title as **Name**. +- **Asset** widget: Set the title as **Picture**. + +When you’re done, click "Create Content Type". + +### Step 3. Create a `Post` model + +Click **Add Content Type** again. + +- The title should be `Post`. + +Next, add these fields (you don't have to modify the settings unless specified): + +- **Single Line** widget: Set the title as **Title**. +- **Markdown** widget: Set the title as **Content**. +- **Single Line** widget: Set the title as **Excerpt**. +- **Asset** widget: Set the title as **Cover Image**. +- **Date** widget: Set the title as **Date**. +- **Single Line** widget: Set the title as **Slug**. +- **Relationship** widget: Set the title as **Author**, then set **Relationship Type** to `Single` and check the `Author` checkbox under **Allowed Content Types**. + +When you’re done, click "Create Content Type". + +### Step 4. Populate Content + +Select **Author** and create a new record. + +- You just need **1 Author record**. +- Use dummy data for the text. +- For the image, you can download one from [Unsplash](https://unsplash.com/). + +When you’re done, make sure to click **Enabled** under **Workflow Status**. + +Next, select **Post** and create a new record. + +- We recommend creating at least **2 Post records**. +- 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. + +When you’re done, make sure to click **Enabled** under **Workflow Status**. + +### Step 5. Set up environment variables + +From the dropdown next to the project name, click **API Keys**. + +Create a new API Key with the **Read** permission. + +Next, copy the `.env.example` file in this directory to `.env` (which will be ignored by Git): + +```bash +cp .env.example .env +``` + +Then set each variable on `.env`: + +- `NEXT_EXAMPLE_CMS_TAKESHAPE_API_KEY` should be the API token you just copied. +- `NEXT_EXAMPLE_CMS_TAKESHAPE_PROJECT_ID` should be the project ID, which is a substring in the project page URL: `https://app.takeshape.io/projects//...` +- `NEXT_EXAMPLE_CMS_TAKESHAPE_PREVIEW_SECRET` can be any random string (but avoid spaces), like `MY_SECRET` - this is used for [the Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode). + +Your `.env` file should look like this: + +```bash +NEXT_EXAMPLE_CMS_TAKESHAPE_PROJECT_ID=... +NEXT_EXAMPLE_CMS_TAKESHAPE_API_KEY=... +NEXT_EXAMPLE_CMS_TAKESHAPE_PREVIEW_SECRET=... +``` + +### Step 6. Run Next.js in development mode + +```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)! If it doesn't work, post on [GitHub discussions](https://github.com/zeit/next.js/discussions). + +### Step 7. Try preview mode + +On TakeShape, create a new post like before. But **DO NOT** click **Enabled** under **Workflow Status**. + +Now, if you go to `http://localhost:3000/posts/` (replace ``), you won’t see the post. However, if you use the **Preview Mode**, you'll be able to see the change ([Documentation](/docs/advanced-features/preview-mode.md)). + +To enable the Preview Mode, go to this URL: + +``` +http://localhost:3000/api/preview?secret=&slug= +``` + +- `` should be the string you entered for `NEXT_EXAMPLE_CMS_TAKESHAPE_PREVIEW_SECRET`. +- `` should be the post's `slug` attribute (you can check on TakeShape). + +You should now be able to see this post. To exit the preview mode, you can click **Click here to exit preview mode** at the top. + +### Step 8. Deploy on ZEIT Now + +You can deploy this app to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). + +To deploy on ZEIT Now, you need to set the environment variables with **Now Secrets** using [Now CLI](https://zeit.co/download) ([Documentation](https://zeit.co/docs/now-cli#commands/secrets)). + +Install [Now CLI](https://zeit.co/download), log in to your account from the CLI, and run the following commands to add the environment variables. Replace `` and `` with the corresponding strings in `.env`. + +``` +now secrets add next_example_cms_takeshape_api_key +now secrets add next_example_cms_takeshape_project_id +now secrets add next_example_cms_takeshape_preview_secret +``` + +Then push the project to GitHub/GitLab/Bitbucket and [import to ZEIT Now](https://zeit.co/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) to deploy. diff --git a/examples/cms-takeshape/components/alert.js b/examples/cms-takeshape/components/alert.js new file mode 100644 index 000000000000000..3530e66e59c8d35 --- /dev/null +++ b/examples/cms-takeshape/components/alert.js @@ -0,0 +1,42 @@ +import Container from './container' +import cn from 'classnames' +import { EXAMPLE_PATH } from '../lib/constants' + +export default function Alert({ preview }) { + return ( +
+ +
+ {preview ? ( + <> + This is 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-takeshape/components/avatar.js b/examples/cms-takeshape/components/avatar.js new file mode 100644 index 000000000000000..a5df334c51526c5 --- /dev/null +++ b/examples/cms-takeshape/components/avatar.js @@ -0,0 +1,20 @@ +import { getImageUrl } from 'takeshape-routing' + +export default function Avatar({ name, picture }) { + return ( +
+ {name} +
{name}
+
+ ) +} diff --git a/examples/cms-takeshape/components/container.js b/examples/cms-takeshape/components/container.js new file mode 100644 index 000000000000000..fc1c29dfb074756 --- /dev/null +++ b/examples/cms-takeshape/components/container.js @@ -0,0 +1,3 @@ +export default function Container({ children }) { + return
{children}
+} diff --git a/examples/cms-takeshape/components/cover-image.js b/examples/cms-takeshape/components/cover-image.js new file mode 100644 index 000000000000000..b048c0e20ebda36 --- /dev/null +++ b/examples/cms-takeshape/components/cover-image.js @@ -0,0 +1,30 @@ +import cn from 'classnames' +import Link from 'next/link' +import { getImageUrl } from 'takeshape-routing' + +export default function CoverImage({ title, coverImage, slug }) { + const image = ( + + ) + return ( +
+ {slug ? ( + + {image} + + ) : ( + image + )} +
+ ) +} diff --git a/examples/cms-takeshape/components/date.js b/examples/cms-takeshape/components/date.js new file mode 100644 index 000000000000000..eac5681378bfd4f --- /dev/null +++ b/examples/cms-takeshape/components/date.js @@ -0,0 +1,6 @@ +import { parseISO, format } from 'date-fns' + +export default function Date({ dateString }) { + const date = parseISO(dateString) + return +} diff --git a/examples/cms-takeshape/components/footer.js b/examples/cms-takeshape/components/footer.js new file mode 100644 index 000000000000000..dbde8ff306efdbf --- /dev/null +++ b/examples/cms-takeshape/components/footer.js @@ -0,0 +1,30 @@ +import Container from './container' +import { EXAMPLE_PATH } from '../lib/constants' + +export default function Footer() { + return ( + + ) +} diff --git a/examples/cms-takeshape/components/header.js b/examples/cms-takeshape/components/header.js new file mode 100644 index 000000000000000..562e7e3eebb6a00 --- /dev/null +++ b/examples/cms-takeshape/components/header.js @@ -0,0 +1,12 @@ +import Link from 'next/link' + +export default function Header() { + return ( +

+ + Blog + + . +

+ ) +} diff --git a/examples/cms-takeshape/components/hero-post.js b/examples/cms-takeshape/components/hero-post.js new file mode 100644 index 000000000000000..4a8e37bc724c5c8 --- /dev/null +++ b/examples/cms-takeshape/components/hero-post.js @@ -0,0 +1,37 @@ +import Avatar from '../components/avatar' +import Date from '../components/date' +import CoverImage from '../components/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-takeshape/components/intro.js b/examples/cms-takeshape/components/intro.js new file mode 100644 index 000000000000000..5931b3c5961bdbb --- /dev/null +++ b/examples/cms-takeshape/components/intro.js @@ -0,0 +1,28 @@ +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-takeshape/components/layout.js b/examples/cms-takeshape/components/layout.js new file mode 100644 index 000000000000000..99d95353131e0fa --- /dev/null +++ b/examples/cms-takeshape/components/layout.js @@ -0,0 +1,16 @@ +import Alert from '../components/alert' +import Footer from '../components/footer' +import Meta from '../components/meta' + +export default function Layout({ preview, children }) { + return ( + <> + +
+ +
{children}
+
+