├── .env
├── .gitignore
├── README.md
├── next-env.d.ts
├── package.json
├── pages
    ├── _app.tsx
    ├── index.tsx
    └── post
    │   └── [slug].tsx
├── public
    ├── favicon.ico
    └── vercel.svg
├── styles
    ├── Home.module.scss
    └── globals.scss
├── tsconfig.json
└── yarn.lock


/.env:
--------------------------------------------------------------------------------
1 | CONTENT_API_KEY=5b920e0acdf1d69b540a80b7e9
2 | BLOG_URL=https://ghostcms-nextjs-backend.herokuapp.com


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 | 
33 | # vercel
34 | .vercel
35 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | ```
12 | 
13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14 | 
15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
16 | 
17 | ## Changes
18 | 
19 | Please make sure to update your Ghost API keys and your blog URL according to where you have deployed your Ghost CMS. You can watch the [building and deployment process here](https://www.youtube.com/watch?v=1SYU1GorO6Y)
20 | 


--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/types/global" />
3 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ghost-cms-nextjs",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start"
 9 |   },
10 |   "dependencies": {
11 |     "next": "9.5.2",
12 |     "react": "16.13.1",
13 |     "react-dom": "16.13.1"
14 |   },
15 |   "devDependencies": {
16 |     "@types/node": "^14.0.27",
17 |     "@types/react": "^16.9.46",
18 |     "sass": "^1.26.10",
19 |     "typescript": "^3.9.7"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import '../styles/globals.scss'
2 | 
3 | export default function App({ Component, pageProps }) {
4 | 	return <Component {...pageProps} />
5 | }
6 | 


--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head'
 2 | import styles from '../styles/Home.module.scss'
 3 | import Link from 'next/link'
 4 | 
 5 | const { BLOG_URL, CONTENT_API_KEY } = process.env
 6 | 
 7 | type Post = {
 8 | 	title: string
 9 | 	slug: string
10 | }
11 | 
12 | async function getPosts() {
13 | 	// curl ""
14 | 	const res = await fetch(
15 | 		`${BLOG_URL}/ghost/api/v3/content/posts/?key=${CONTENT_API_KEY}&fields=title,slug,custom_excerpt`
16 | 	).then((res) => res.json())
17 | 
18 | 	const posts = res.posts
19 | 
20 | 	return posts
21 | }
22 | 
23 | export const getStaticProps = async ({ params }) => {
24 | 	const posts = await getPosts()
25 | 	return {
26 | 		revalidate: 10,
27 | 		props: { posts }
28 | 	}
29 | }
30 | 
31 | const Home: React.FC<{ posts: Post[] }> = (props) => {
32 | 	const { posts } = props
33 | 
34 | 	return (
35 | 		<div className={styles.container}>
36 | 			<h1>Hello to my blog</h1>
37 | 			<ul>
38 | 				{posts.map((post, index) => {
39 | 					return (
40 | 						<li className={styles.postitem} key={post.slug}>
41 | 							<Link href="/post/[slug]" as={`/post/${post.slug}`}>
42 | 								<a>{post.title}</a>
43 | 							</Link>
44 | 						</li>
45 | 					)
46 | 				})}
47 | 			</ul>
48 | 		</div>
49 | 	)
50 | }
51 | 
52 | export default Home
53 | 


--------------------------------------------------------------------------------
/pages/post/[slug].tsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link'
 2 | import { useRouter } from 'next/router'
 3 | import styles from '../../styles/Home.module.scss'
 4 | import { useState } from 'react'
 5 | 
 6 | const { BLOG_URL, CONTENT_API_KEY } = process.env
 7 | 
 8 | async function getPost(slug: string) {
 9 | 	const res = await fetch(
10 | 		`${BLOG_URL}/ghost/api/v3/content/posts/slug/${slug}?key=${CONTENT_API_KEY}&fields=title,slug,html`
11 | 	).then((res) => res.json())
12 | 
13 | 	const posts = res.posts
14 | 
15 | 	return posts[0]
16 | }
17 | 
18 | // Ghost CMS Request
19 | export const getStaticProps = async ({ params }) => {
20 | 	const post = await getPost(params.slug)
21 | 	return {
22 | 		props: { post },
23 | 		revalidate: 10
24 | 	}
25 | }
26 | 
27 | // hello-world - on first request = Ghost CMS call is made (1)
28 | // hello-world - on other requests ... = filesystem is called (1M)
29 | 
30 | export const getStaticPaths = () => {
31 | 	// paths -> slugs which are allowed
32 | 	// fallback ->
33 | 	return {
34 | 		paths: [],
35 | 		fallback: true
36 | 	}
37 | }
38 | 
39 | type Post = {
40 | 	title: string
41 | 	html: string
42 | 	slug: string
43 | }
44 | 
45 | const Post: React.FC<{ post: Post }> = (props) => {
46 | 	console.log(props)
47 | 
48 | 	const { post } = props
49 | 	const [enableLoadComments, setEnableLoadComments] = useState<boolean>(true)
50 | 
51 | 	const router = useRouter()
52 | 
53 | 	if (router.isFallback) {
54 | 		return <h1>Loading...</h1>
55 | 	}
56 | 
57 | 	function loadComments() {
58 | 		setEnableLoadComments(false)
59 | 		;(window as any).disqus_config = function () {
60 | 			this.page.url = window.location.href
61 | 			this.page.identifier = post.slug
62 | 		}
63 | 
64 | 		const script = document.createElement('script')
65 | 		script.src = 'https://ghostcms-nextjs.disqus.com/embed.js'
66 | 		script.setAttribute('data-timestamp', Date.now().toString())
67 | 
68 | 		document.body.appendChild(script)
69 | 	}
70 | 
71 | 	return (
72 | 		<div className={styles.container}>
73 | 			<p className={styles.goback}>
74 | 				<Link href="/">
75 | 					<a>Go back</a>
76 | 				</Link>
77 | 			</p>
78 | 			<h1>{post.title}</h1>
79 | 			<div dangerouslySetInnerHTML={{ __html: post.html }}></div>
80 | 
81 | 			{enableLoadComments && (
82 | 				<p className={styles.goback} onClick={loadComments}>
83 | 					Load Comments
84 | 				</p>
85 | 			)}
86 | 
87 | 			<div id="disqus_thread"></div>
88 | 		</div>
89 | 	)
90 | }
91 | 
92 | export default Post
93 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mehulmpt/ghost-cms-nextjs/1872e7b02894bea1c531d159a387f14fb31b1a67/public/favicon.ico


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/styles/Home.module.scss:
--------------------------------------------------------------------------------
  1 | .container {
  2 | 	min-height: 100vh;
  3 | 	padding: 0 0.5rem;
  4 | 	display: flex;
  5 | 	flex-direction: column;
  6 | 	width: 960px;
  7 | 	margin: 0 auto;
  8 | 	justify-content: center;
  9 | 	align-items: center;
 10 | }
 11 | 
 12 | .postitem {
 13 | 	padding: 10px 0;
 14 | }
 15 | 
 16 | .goback {
 17 | 	text-align: left;
 18 | 	align-self: self-start;
 19 | 	cursor: pointer;
 20 | }
 21 | 
 22 | .main {
 23 | 	padding: 5rem 0;
 24 | 	flex: 1;
 25 | 	display: flex;
 26 | 	flex-direction: column;
 27 | 	justify-content: center;
 28 | 	align-items: center;
 29 | }
 30 | 
 31 | .footer {
 32 | 	width: 100%;
 33 | 	height: 100px;
 34 | 	border-top: 1px solid #eaeaea;
 35 | 	display: flex;
 36 | 	justify-content: center;
 37 | 	align-items: center;
 38 | }
 39 | 
 40 | .footer img {
 41 | 	margin-left: 0.5rem;
 42 | }
 43 | 
 44 | .footer a {
 45 | 	display: flex;
 46 | 	justify-content: center;
 47 | 	align-items: center;
 48 | }
 49 | 
 50 | .title a {
 51 | 	color: #0070f3;
 52 | 	text-decoration: none;
 53 | }
 54 | 
 55 | .title a:hover,
 56 | .title a:focus,
 57 | .title a:active {
 58 | 	text-decoration: underline;
 59 | }
 60 | 
 61 | .title {
 62 | 	margin: 0;
 63 | 	line-height: 1.15;
 64 | 	font-size: 4rem;
 65 | }
 66 | 
 67 | .title,
 68 | .description {
 69 | 	text-align: center;
 70 | }
 71 | 
 72 | .description {
 73 | 	line-height: 1.5;
 74 | 	font-size: 1.5rem;
 75 | }
 76 | 
 77 | .code {
 78 | 	background: #fafafa;
 79 | 	border-radius: 5px;
 80 | 	padding: 0.75rem;
 81 | 	font-size: 1.1rem;
 82 | 	font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
 83 | 		Bitstream Vera Sans Mono, Courier New, monospace;
 84 | }
 85 | 
 86 | .grid {
 87 | 	display: flex;
 88 | 	align-items: center;
 89 | 	justify-content: center;
 90 | 	flex-wrap: wrap;
 91 | 
 92 | 	max-width: 800px;
 93 | 	margin-top: 3rem;
 94 | }
 95 | 
 96 | .card {
 97 | 	margin: 1rem;
 98 | 	flex-basis: 45%;
 99 | 	padding: 1.5rem;
100 | 	text-align: left;
101 | 	color: inherit;
102 | 	text-decoration: none;
103 | 	border: 1px solid #eaeaea;
104 | 	border-radius: 10px;
105 | 	transition: color 0.15s ease, border-color 0.15s ease;
106 | }
107 | 
108 | .card:hover,
109 | .card:focus,
110 | .card:active {
111 | 	color: #0070f3;
112 | 	border-color: #0070f3;
113 | }
114 | 
115 | .card h3 {
116 | 	margin: 0 0 1rem 0;
117 | 	font-size: 1.5rem;
118 | }
119 | 
120 | .card p {
121 | 	margin: 0;
122 | 	font-size: 1.25rem;
123 | 	line-height: 1.5;
124 | }
125 | 
126 | .logo {
127 | 	height: 1em;
128 | }
129 | 
130 | @media (max-width: 600px) {
131 | 	.grid {
132 | 		width: 100%;
133 | 		flex-direction: column;
134 | 	}
135 | }
136 | 


--------------------------------------------------------------------------------
/styles/globals.scss:
--------------------------------------------------------------------------------
 1 | html,
 2 | body {
 3 | 	padding: 0;
 4 | 	margin: 0;
 5 | 	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
 6 | 		Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 7 | }
 8 | 
 9 | a {
10 | 	color: inherit;
11 | 	text-decoration: none;
12 | }
13 | 
14 | * {
15 | 	box-sizing: border-box;
16 | 	max-width: 100%;
17 | }
18 | 
19 | img {
20 | 	height: auto;
21 | }
22 | 
23 | #disqus_thread {
24 | 	width: 100%;
25 | 	margin: 20px 0;
26 | }
27 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "strict": false,
12 |     "forceConsistentCasingInFileNames": true,
13 |     "noEmit": true,
14 |     "esModuleInterop": true,
15 |     "module": "esnext",
16 |     "moduleResolution": "node",
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "jsx": "preserve"
20 |   },
21 |   "include": [
22 |     "next-env.d.ts",
23 |     "**/*.ts",
24 |     "**/*.tsx"
25 |   ],
26 |   "exclude": [
27 |     "node_modules"
28 |   ]
29 | }
30 | 


--------------------------------------------------------------------------------