From f43c8d864859e09ed320620f2b584c5f897d8e27 Mon Sep 17 00:00:00 2001
From: Takahiro Fujiwara <email@wuta.li>
Date: Wed, 26 Aug 2020 22:22:41 +0900
Subject: [PATCH] docs: add NextJS example and template (#4178)

---
 website/content/docs/examples.md              |  2 +-
 website/content/docs/start-with-a-template.md | 17 ++++++++++++-----
 website/public/img/nextjs.svg                 |  1 +
 3 files changed, 14 insertions(+), 6 deletions(-)
 create mode 100644 website/public/img/nextjs.svg

diff --git a/website/content/docs/examples.md b/website/content/docs/examples.md
index e279f9cd..3982be3c 100644
--- a/website/content/docs/examples.md
+++ b/website/content/docs/examples.md
@@ -2,7 +2,6 @@
 title: Examples
 group: contributing
 weight: 110
-
 ---
 
 Do you have a great, open source example? Submit a pull request to this page!
@@ -28,3 +27,4 @@ Example | Tools | Type | Source | More info |
 [Next.js demo](https://netlifycms-nextjs.netlify.com) | Next.js | blog | [masives/netlifycms-nextjs](https://github.com/masives/netlifycms-nextjs) | [read me](https://github.com/masives/netlifycms-nextjs)
 [Delog - JAMStack Blog with Netlify CMS](https://delog-w3layouts.netlify.com/) | Gatsby, Netlify-CMS | demo | [W3Layouts/gatsby-starter-delog](https://github.com/W3Layouts/gatsby-starter-delog) | [blog post](https://w3layouts.com/articles/delog-gatsby-starter-netlify-cms/)
 [Netlify CMS template for Gridsome](https://netlifycms-gridsome.suits.at/) | Gridsome, Vue | demo | [suits-at/netlifycms-gridsome](https://github.com/suits-at/netlifycms-gridsome) | [read me](https://github.com/suits-at/netlifycms-gridsome)
+[Next.js blogging template for Netlify](https://nextjs-netlify-blog-template.netlify.app/) | Next.js, Netlify | blog | [wutali/nextjs-netlify-blog-template](https://github.com/wutali/nextjs-netlify-blog-template) | [read me](https://github.com/wutali/nextjs-netlify-blog-template)
diff --git a/website/content/docs/start-with-a-template.md b/website/content/docs/start-with-a-template.md
index b82df5bb..dc5a55f1 100644
--- a/website/content/docs/start-with-a-template.md
+++ b/website/content/docs/start-with-a-template.md
@@ -5,35 +5,42 @@ weight: 10
 ---
 You can add Netlify CMS [to an existing site](/docs/add-to-your-site/), but the quickest way to get started is with a template.  Found below, our featured templates deploy a bare-bones site and Netlify CMS to Netlify ([what's the difference, you ask?](../intro/#netlify-cms-vs-netlify)), giving you a fully working CMS-enabled site with just a few clicks.
 
-<div style="display: flex; justify-content: space-around; text-align: center; margin-bottom: 1.5em;">
-    <div style="flex-basis: 25%">
+<div style="display: flex; justify-content: left; text-align: center; margin-bottom: 1.5em; flex-wrap: wrap;"stack=cms>
+    <div style="flex-basis: 33%">
         <div style="padding: 0 15%; height: 100px; display: flex; justify-content: center;">
           <img style="display: flex" src="/img/hugo.svg"/>
         </div>
         <h4>Hugo Site Starter</h4>
         <p><a href="https://app.netlify.com/start/deploy?repository=https://github.com/netlify-templates/one-click-hugo-cms&amp;stack=cms"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" /></a></p>
     </div>
-    <div style="flex-basis: 25%">
+    <div style="flex-basis: 33%">
         <div style="padding: 0 30%; height: 100px; display: flex; justify-content: center;">
           <img style="display: flex" src="/img/gatsby.svg"/>
         </div>
         <h4>Gatsby Site Starter</h4>
         <p><a href="https://app.netlify.com/start/deploy?repository=https://github.com/AustinGreen/gatsby-starter-netlify-cms&amp;stack=cms"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" /></a></p>
     </div>
-    <div style="flex-basis: 25%">
+    <div style="flex-basis: 33%">
         <div style="padding: 0 30%; height: 100px; display: flex; justify-content: center;">
           <img style="display: flex" src="/img/middleman.svg"/>
         </div>
         <h4>Middleman Site Starter</h4>
         <p><a href="https://app.netlify.com/start/deploy?repository=https://github.com/tomrutgers/middleman-starter-netlify-cms&amp;stack=cms"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" /></a></p>
     </div>
-    <div style="flex-basis: 25%">
+    <div style="flex-basis: 33%">
         <div style="padding: 0 30%; height: 100px; display: flex; justify-content: center;">
           <img style="display: flex" src="/img/preact.svg"/>
         </div>
         <h4>Preact CLI</h4>
         <p><a href="https://app.netlify.com/start/deploy?repository=https://github.com/preactjs/preact-netlify&amp;stack=cms"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" /></a></p>
     </div>
+    <div style="flex-basis: 33%">
+        <div style="padding: 0 30%; height: 100px; display: flex; justify-content: center;">
+          <img style="display: flex" src="/img/nextjs.svg"/>
+        </div>
+        <h4>Next.js Blog Template</h4>
+        <p><a href="https://app.netlify.com/start/deploy?repository=https://github.com/wutali/nextjs-netlify-blog-template&amp;stack=cms"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" /></a></p>
+    </div>
 </div>
 
 After clicking one of those buttons, authenticate with GitHub or GitLab and choose a repository name. Netlify then automatically creates a clone of the repository in your GitHub or GitLab account. Next, it builds and deploys the new site on Netlify, bringing you to the site dashboard after completing the build.
diff --git a/website/public/img/nextjs.svg b/website/public/img/nextjs.svg
new file mode 100644
index 00000000..14b38378
--- /dev/null
+++ b/website/public/img/nextjs.svg
@@ -0,0 +1 @@
+<svg height="1024pt" viewBox=".5 -.2 1023 1024.1" width="1024pt" xmlns="http://www.w3.org/2000/svg"><path d="m478.5.6c-2.2.2-9.2.9-15.5 1.4-145.3 13.1-281.4 91.5-367.6 212-48 67-78.7 143-90.3 223.5-4.1 28.1-4.6 36.4-4.6 74.5s.5 46.4 4.6 74.5c27.8 192.1 164.5 353.5 349.9 413.3 33.2 10.7 68.2 18 108 22.4 15.5 1.7 82.5 1.7 98 0 68.7-7.6 126.9-24.6 184.3-53.9 8.8-4.5 10.5-5.7 9.3-6.7-.8-.6-38.3-50.9-83.3-111.7l-81.8-110.5-102.5-151.7c-56.4-83.4-102.8-151.6-103.2-151.6-.4-.1-.8 67.3-1 149.6-.3 144.1-.4 149.9-2.2 153.3-2.6 4.9-4.6 6.9-8.8 9.1-3.2 1.6-6 1.9-21.1 1.9h-17.3l-4.6-2.9c-3-1.9-5.2-4.4-6.7-7.3l-2.1-4.5.2-200.5.3-200.6 3.1-3.9c1.6-2.1 5-4.8 7.4-6.1 4.1-2 5.7-2.2 23-2.2 20.4 0 23.8.8 29.1 6.6 1.5 1.6 57 85.2 123.4 185.9s157.2 238.2 201.8 305.7l81 122.7 4.1-2.7c36.3-23.6 74.7-57.2 105.1-92.2 64.7-74.3 106.4-164.9 120.4-261.5 4.1-28.1 4.6-36.4 4.6-74.5s-.5-46.4-4.6-74.5c-27.8-192.1-164.5-353.5-349.9-413.3-32.7-10.6-67.5-17.9-106.5-22.3-9.6-1-75.7-2.1-84-1.3zm209.4 309.4c4.8 2.4 8.7 7 10.1 11.8.8 2.6 1 58.2.8 183.5l-.3 179.8-31.7-48.6-31.8-48.6v-130.7c0-84.5.4-132 1-134.3 1.6-5.6 5.1-10 9.9-12.6 4.1-2.1 5.6-2.3 21.3-2.3 14.8 0 17.4.2 20.7 2z"/><path d="m784.3 945.1c-3.5 2.2-4.6 3.7-1.5 2 2.2-1.3 5.8-4 5.2-4.1-.3 0-2 1-3.7 2.1zm-6.9 4.5c-1.8 1.4-1.8 1.5.4.4 1.2-.6 2.2-1.3 2.2-1.5 0-.8-.5-.6-2.6 1.1zm-5 3c-1.8 1.4-1.8 1.5.4.4 1.2-.6 2.2-1.3 2.2-1.5 0-.8-.5-.6-2.6 1.1zm-5 3c-1.8 1.4-1.8 1.5.4.4 1.2-.6 2.2-1.3 2.2-1.5 0-.8-.5-.6-2.6 1.1zm-7.6 4c-3.8 2-3.6 2.8.2.9 1.7-.9 3-1.8 3-2 0-.7-.1-.6-3.2 1.1z"/></svg>
\ No newline at end of file