gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: update Next.js example to import component (#2928)

Browse Source
This commit is contained in:
Kengo Hamasaki 2019-11-28 16:52:21 -08:00 committed by Shawn Erquhart
parent 1ff9db0915
commit 445979a992
1 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
website/content/docs/nextjs.md
View File

@ -7,6 +7,7 @@ group: guides
This guide will help you get started using Netlify CMS with NextJS. This guide will help you get started using Netlify CMS with NextJS.
## Creating a new project ## Creating a new project
Let's repeat some of the basics of setting up a simple NextJS project (check out [nextjs.org/learn](http://nextjs.org/learn) for a more detailed version). Let's repeat some of the basics of setting up a simple NextJS project (check out [nextjs.org/learn](http://nextjs.org/learn) for a more detailed version).
```bash ```bash
@ -20,7 +21,7 @@ npm init -y
# Install required dependencies # Install required dependencies
npm install --save react react-dom next npm install --save react react-dom next
# Install webpack loader for Markdown # Install webpack loader for Markdown (Use version 3+)
npm install --save-dev frontmatter-markdown-loader npm install --save-dev frontmatter-markdown-loader
# Create folder for pages (default for NextJS), and add a index file # Create folder for pages (default for NextJS), and add a index file
@ -79,7 +80,8 @@ module.exports = {
cfg.module.rules.push( cfg.module.rules.push(
{ {
test: /\.md$/, test: /\.md$/,
use: 'frontmatter-markdown-loader' use: 'frontmatter-markdown-loader',
options: { mode: ['react-component'] }
} }
) )
return cfg; return cfg;
@ -92,11 +94,11 @@ Almost there! The last thing we need to do is to add some content our ```pages/i
```js ```js
import Head from "next/head" import Head from "next/head"
import { Component } from 'react' import { Component } from 'react'
import content from '../content/home.md'; import { attributes, react as HomeContent } from '../content/home.md';
export default class Home extends Component { export default class Home extends Component {
render() { render() {
let { html , attributes:{ title, cats } } = content; let { title, cats } = attributes;
return ( return (
<> <>
<Head> <Head>
@ -104,7 +106,7 @@ export default class Home extends Component {
</Head> </Head>
<article> <article>
<h1>{title}</h1> <h1>{title}</h1>
<div dangerouslySetInnerHTML={{ __html: html }} /> <HomeContent />
<ul> <ul>
{cats.map((cat, k) => ( {cats.map((cat, k) => (
<li key={k}> <li key={k}>
@ -205,7 +207,6 @@ node_modules/
out/ out/
``` ```
When your project is under version control, go to Netlify and select "New Site from Git". When your project is under version control, go to Netlify and select "New Site from Git".
Select GitHub (or whatever service you used in the previous step), and the repository you just pushed to. Select GitHub (or whatever service you used in the previous step), and the repository you just pushed to.
@ -216,7 +217,6 @@ Under the final step (Build options, and deploy!), make sure you enter the follo
| Build command | **npm run export** | | Build command | **npm run export** |
| Publish directory | **out** | | Publish directory | **out** |
### Enable Identity and Git Gateway ### Enable Identity and Git Gateway
Netlify's Identity and Git Gateway services allow you to manage CMS admin users for your site without requiring them to have an account with your Git host or commit access on your repo. From your site dashboard on Netlify: Netlify's Identity and Git Gateway services allow you to manage CMS admin users for your site without requiring them to have an account with your Git host or commit access on your repo. From your site dashboard on Netlify:
@ -227,6 +227,7 @@ Netlify's Identity and Git Gateway services allow you to manage CMS admin users
4. Scroll down to **Services > Git Gateway**, and click **Enable Git Gateway**. This authenticates with your Git host and generates an API access token. In this case, we're leaving the **Roles** field blank, which means any logged in user may access the CMS. For information on changing this, check the [Netlify Identity documentation](https://www.netlify.com/docs/identity/). 4. Scroll down to **Services > Git Gateway**, and click **Enable Git Gateway**. This authenticates with your Git host and generates an API access token. In this case, we're leaving the **Roles** field blank, which means any logged in user may access the CMS. For information on changing this, check the [Netlify Identity documentation](https://www.netlify.com/docs/identity/).
### Celebrate! ### Celebrate!
Great job - you did it! Great job - you did it!
Open your new page via the new Netlify URL, and navigate to ```/admin```. If you did everything correct in the previous step, you should now be able to sign up for an account, and log in. Open your new page via the new Netlify URL, and navigate to ```/admin```. If you did everything correct in the previous step, you should now be able to sign up for an account, and log in.