# Create a Blog with Next JS
Create a Blog with Next JS
==========================
Create An expert Blog with Next JS and deploy it on Vercel from start to end
----------------------------------------------------------------------------
[
](https://hashnode.com/@Programing-School)
[Programming-School](https://hashnode.com/@Programing-School)
ยท[Feb 11, 2022](https://programming-school.hashnode.dev/create-a-blog-with-next-js)ยท25 min read
Subscribe to our newsletter and never miss any upcoming articles
Subscribe
Listen to this article
Your browser does not support the audio element.SPEED1X
### Table of contents
* [Hello Everyone](https://programming-school.hashnode.dev/#heading-hello-everyone)
* [Make Our Project and install our tools and libraries](https://programming-school.hashnode.dev/#heading-make-our-project-and-install-our-tools-and-libraries)
* [Create Our Directory and make the project](https://programming-school.hashnode.dev/#heading-create-our-directory-and-make-the-project)
* [Code Our Blog](https://programming-school.hashnode.dev/#heading-code-our-blog)
* [Install All Our Tools](https://programming-school.hashnode.dev/#heading-install-all-our-tools)
* [Let's Create A New File called \_document.js](https://programming-school.hashnode.dev/#heading-lets-create-a-new-file-called-documentjs)
* [Create Our Components](https://programming-school.hashnode.dev/#heading-create-our-components)
* [Create Header Component](https://programming-school.hashnode.dev/#heading-create-header-component)
* [Create GraphCMS Account and get all information from it](https://programming-school.hashnode.dev/#heading-create-graphcms-account-and-get-all-information-from-it)
* [Author Model](https://programming-school.hashnode.dev/#heading-author-model)
* [Category Model](https://programming-school.hashnode.dev/#heading-category-model)
* [Comment Model](https://programming-school.hashnode.dev/#heading-comment-model)
* [Post Model](https://programming-school.hashnode.dev/#heading-post-model)
* [Add Reference](https://programming-school.hashnode.dev/#heading-add-reference)
* [Post Model](https://programming-school.hashnode.dev/#heading-post-model)
* [Fetch the data from the API](https://programming-school.hashnode.dev/#heading-fetch-the-data-from-the-api)
* [URLS That get data from](https://programming-school.hashnode.dev/#heading-urls-that-get-data-from)
* [Fetch Data](https://programming-school.hashnode.dev/#heading-fetch-data)
* [Update Header Component](https://programming-school.hashnode.dev/#heading-update-header-component)
* [Adjacent Post Card Component](https://programming-school.hashnode.dev/#heading-adjacent-post-card-component)
* [Utils](https://programming-school.hashnode.dev/#heading-utils)
* [Author Component](https://programming-school.hashnode.dev/#heading-author-component)
* [Categories Component](https://programming-school.hashnode.dev/#heading-categories-component)
* [Comments Section](https://programming-school.hashnode.dev/#heading-comments-section)
* [Comments Form Component](https://programming-school.hashnode.dev/#heading-comments-form-component)
* [Featured Post Card Component](https://programming-school.hashnode.dev/#heading-featured-post-card-component)
* [Loader Component](https://programming-school.hashnode.dev/#heading-loader-component)
* [Post Card Component](https://programming-school.hashnode.dev/#heading-post-card-component)
* [Post Details Component](https://programming-school.hashnode.dev/#heading-post-details-component)
* [Update index.jsx file](https://programming-school.hashnode.dev/#heading-update-indexjsx-file)
* [Sections Folder](https://programming-school.hashnode.dev/#heading-sections-folder)
* [Adjacent Posts section](https://programming-school.hashnode.dev/#heading-adjacent-posts-section)
* [Featured Post Section](https://programming-school.hashnode.dev/#heading-featured-post-section)
* [Pages Folder](https://programming-school.hashnode.dev/#heading-pages-folder)
* [Comments](https://programming-school.hashnode.dev/#heading-comments)
* [Catogery](https://programming-school.hashnode.dev/#heading-catogery)
* [Deploy Your Site in Vercel](https://programming-school.hashnode.dev/#heading-deploy-your-site-in-vercel)
Hello Everyone
==============
If you want to make A Blog with Your self this article will help you to make a blog with a dashboard
Make Our Project and install our tools and libraries
====================================================
Create Our Directory and make the project
-----------------------------------------
1. Create in your drive or desktop a folder for the project I named it `hashnode-blog`
> Don't use uppercase in your project folder's name because he will give you an error
2. Go to your directory in the top there write `cmd` in windows:
1. When You write cmd and press enter a window will open for you like this:
1. Write in it `npx create-next-app ./` Then press enter:
1. He will install `react, react-dom, next, eslint, and eslint-config-next` and in the end he will show you this window:
In the pages folder ๐ all our code for the website as you can see:
Code Our Blog
=============
If you want to code you should have a code editor, I will use Visual Studio Code but If you currently have a code editor don't switch to visual studio code
If you currently using vs code write code . in our command prompt and press enter as you can see:
Then it will open vs code window as you can see:
and as you can see this is our project starter:
1. Go to index.js File and check the code:
Now Let's Convert this code to:
import Head from 'next/head';
export default function Home() {
return (
)
}
1. Run our code in our computer server by run `npm run dev` and press enter in command prompt as you can see:
Install All Our Tools
---------------------
If you use npm you will write this as you can see : `npm install graphql graphql-request html-react-parser moment react-multi-carousel sass swr` the next command is `npm install -D tailwindcss postcss autoprefixer` to install tailwindcss framework and the next is `npx tailwindcss init -p` to initialize your tailwindcss framework in your project
Then You will have a file called `tailwind.config.js` convert it's code to:
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
spacing: {
'2/3': '66.666667%',
},
},
},
variants: {
extend: {},
},
plugins: [],
};
And in globals.scss file delete all and paste this in globals.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Bebas+Neue&family=Cairo:wght@200;300;500;700;900&family=Inconsolata&family=Kumbh+Sans:wght@100;200;300;400;500;600;700;800;900&family=Open+Sans+Condensed:ital,wght@0,300;0,700;1,300&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Oswald:wght@200;300;400;500;600;700&family=Public+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,300;1,400;1,700&display=swap');
html,
body {
padding: 0;
margin: 0;
font-family: 'Oswald', sans-serif;
&:before{
content:'';
content: "";
width: 100%;
height: 100vh;
//background: linear-gradient(to right bottom, #6d327c, #485DA6, #00a1ba, #01b18e, #32b37b);
// background: #D3D3D3;
background-image: url("../public/bg.jpg");
position: fixed;
left: 0;
top: 0;
z-index: -1;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
}
.hover2:hover {
box-shadow: 0 35px 80px -20px rgb(0 0 10 / 5%), 0 30px 60px -30px rgb(0 0 0 / 15%);
}
.text-shadow{
text-shadow: 0px 2px 0px rgb(0 0 0 / 30%);
}
.adjacent-post{
& .arrow-btn{
transition: width 300ms ease;
width: 50px;
}
&:hover{
& .arrow-btn{
width: 60px;
}
}
}
.react-multi-carousel-list {
& .arrow-btn{
transition: width 300ms ease;
width: 50px;
&:hover{
width: 60px;
}
}
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
@media (max-width: 320px) {
.mde {
font-size: 20px;
}
}
> If There is globals.css convert the name to globals.scss
Let's Create A New File called `_document.js`
---------------------------------------------
Let's Paste this code in it:
import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
[You name Here] | Blog
);
}
}
export default MyDocument;
Create Our Components
---------------------
1. Create `components` Folder
### Create Header Component
2. Create `Header.jsx` file Let's import all our tools: \`\`\`js import React, { useState, useEffect } from 'react';
import Link from 'next/link';
2. Make a variable called Header and write our styles then export it as you can see:
import React, { useState, useEffect } from 'react';
import Link from 'next/link';
const Header = () => { return (
Programing-School
Web
); };
export default Header;
Let's Create Our ```Layout.jsx``` file and write this code as you can see:
```js
import React from 'react';
import Header from './Header';
const Layout = ({ children }) => (
<>
{children}
);
export default Layout;
Let's Create Our `index.jsx` file to export all our files in it:
export { default as Layout } from './Layout';
Create GraphCMS Account and get all information from it
-------------------------------------------------------
1. Go to [app.graphcms.com](https://app.graphcms.com/) and sign up
2. After Sign up Go and create a new project called `[Your Blog name Here] | Blog`:
 3.Click on Setup Schema and click to new Model:
### Author Model
1. Let's Name this new Model `Author`
2. Let's Add A New Field From the sidebar `Single line Text` and name it `Name` and API ID `name` and make the field required:
1. Let's Add A New Field from the sidebar `Asset Picker` and name it `Photo` and API ID `photo`:
1. Let's Add A New Field from the sidebar `Multi line text` and name it `Bio` and API ID `bio`:
This is the Fields in the end:
### Category Model
1. Let's Add A New Model Called `Category`
2. Let's Add A New Field from the sidebar `Single line text` and it's name is `Name` and API ID `name` and make it required and make it Unique:
1. Let's Add A New Field from the sidebar `Slug` and it's name is `Slug` and API ID \`\`\` slug and make it required and make it Unique and Then Create it:
### Comment Model
1. Create A Model Called `Comment`
2. Let's Add A Field from the sidebar `Single line text` and make it's name `Name` and it's API ID `name`:
1. Let's Add Another Field from the sidebar `Single line text` and make it's name `Email` and it's API ID `email` and make it required:
1. Let's Add A Field from the sidebar `Multi line text` and make it's name `Comment` and it's API ID `email` and make it required Then Create it:
### Post Model
1. Create New Model Called `Post`
2. Let's Add A Field from the sidebar `Single line text` and it's Name is `Title` and It's API ID is `title` and make it required and make it as title:
1. Let's Add A Field from the sidebar `Rich text` and it's Name is `Content` and it's API ID is `content` and make it required and Embeds:
1. Let's Add A Field from the sidebar `Slug` and it's Name is `Slug` and it's API ID is `slug` and make it required and Unique
2. Let's Add A Field from the sidebar `Multi line text` and it's Name is `Excerpt` and it's API ID is `excerpt` and make it required
3. Let's Add A Field from the sidebar `Asset Picker` and it's Name is `Featured Image` and it's API ID is `featuredImage` and make it required
4. Let's Add A New Field from the sidebar `Boolean` and it's Name is `Featured Post` and it's API ID is `featuredPost` and make it required:
### Add Reference
#### Post Model
1. Add A New Field `Reference` and it's Name `Author` and it's API ID `author` and the other field it's Name is `Post` and it's API ID `post`:
If you don't know how to customize vs code go to [my article about vs code extensions](https://programming-school.com/visual-studio-code-ckxxm3se008kbu4s115iqd1bh)
1. Add A New Field `Reference` and Keep All the Fields and check the images:
1. Add A New Field `Reference` and keep All Fields and check the images:
### Fetch the data from the API
#### URLS That get data from
Now Let's Add New File Called `.env` to put in it all secure environment variables and Go to our project and go to settings:
And Then Go to `Environments` and copy that:
And Then Let's Update Environment variables With the url we copied:
NEXT_PUBLIC_GRAPHCMS_ENDPOINT="The URL you copied"
Now Let's Get the API Token Now Go to our website to settings to API access to The bottom of the page click `Create Token` and name the token With Name you choose and click Create & Configure Permission and copy the token:
And Now update `.env` file with this token you copied:
NEXT_PUBLIC_GRAPHCMS_ENDPOINT="The URL you copied"
GRAPHCMS_TOKEN="Your Token"
#### Fetch Data
Now Let's Add New Folder Called `services` and make a New File in it Called `index.js` and paste this code in it to get all data:
import { request, gql } from 'graphql-request';
const graphqlAPI = process.env.NEXT_PUBLIC_GRAPHCMS_ENDPOINT;
export const getPosts = async () => {
const query = gql`
query MyQuery {
postsConnection {
edges {
cursor
node {
author {
bio
name
id
photo {
url
}
}
createdAt
slug
title
excerpt
featuredImage {
url
}
categories {
name
slug
}
}
}
}
}
`;
const result = await request(graphqlAPI, query);
return result.postsConnection.edges;
};
export const getCategories = async () => {
const query = gql`
query GetGategories {
categories {
name
slug
}
}
`;
const result = await request(graphqlAPI, query);
return result.categories;
};
export const getPostDetails = async (slug) => {
const query = gql`
query GetPostDetails($slug : String!) {
post(where: {slug: $slug}) {
title
excerpt
featuredImage {
url
}
author{
name
bio
photo {
url
}
}
createdAt
slug
content {
raw
}
categories {
name
slug
}
}
}
`;
const result = await request(graphqlAPI, query, { slug });
return result.post;
};
export const getSimilarPosts = async (categories, slug) => {
const query = gql`
query GetPostDetails($slug: String!, $categories: [String!]) {
posts(
where: {slug_not: $slug, AND: {categories_some: {slug_in: $categories}}}
last: 3
) {
title
featuredImage {
url
}
createdAt
slug
}
}
`;
const result = await request(graphqlAPI, query, { slug, categories });
return result.posts;
};
export const getAdjacentPosts = async (createdAt, slug) => {
const query = gql`
query GetAdjacentPosts($createdAt: DateTime!,$slug:String!) {
next:posts(
first: 1
orderBy: createdAt_ASC
where: {slug_not: $slug, AND: {createdAt_gte: $createdAt}}
) {
title
featuredImage {
url
}
createdAt
slug
}
previous:posts(
first: 1
orderBy: createdAt_DESC
where: {slug_not: $slug, AND: {createdAt_lte: $createdAt}}
) {
title
featuredImage {
url
}
createdAt
slug
}
}
`;
const result = await request(graphqlAPI, query, { slug, createdAt });
return { next: result.next[0], previous: result.previous[0] };
};
export const getCategoryPost = async (slug) => {
const query = gql`
query GetCategoryPost($slug: String!) {
postsConnection(where: {categories_some: {slug: $slug}}) {
edges {
cursor
node {
author {
bio
name
id
photo {
url
}
}
createdAt
slug
title
excerpt
featuredImage {
url
}
categories {
name
slug
}
}
}
}
}
`;
const result = await request(graphqlAPI, query, { slug });
return result.postsConnection.edges;
};
export const getFeaturedPosts = async () => {
const query = gql`
query GetCategoryPost() {
posts(where: {featuredPost: true}) {
author {
name
photo {
url
}
}
featuredImage {
url
}
title
slug
createdAt
}
}
`;
const result = await request(graphqlAPI, query);
return result.posts;
};
export const submitComment = async (obj) => {
const result = await fetch('/api/comments', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(obj),
});
return result.json();
};
export const getComments = async (slug) => {
const query = gql`
query GetComments($slug:String!) {
comments(where: {post: {slug:$slug}}){
name
createdAt
comment
}
}
`;
const result = await request(graphqlAPI, query, { slug });
return result.comments;
};
export const getRecentPosts = async () => {
const query = gql`
query GetPostDetails() {
posts(
orderBy: createdAt_ASC
last: 3
) {
title
featuredImage {
url
}
createdAt
slug
}
}
`;
const result = await request(graphqlAPI, query);
return result.posts;
};
### Update Header Component
And Now Let's Update `Header.jsx`:
import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { getCategories } from '../services';
const Header = () => {
const [categories, setCategories] = useState([]);
useEffect(() => {
getCategories().then((newCategories) => {
setCategories(newCategories);
});
}, []);
return (
);
};
export default Header;
### Adjacent Post Card Component
Now Let's Add A New File in components folder called `AdjacentPostCard.jsx`:
import React from 'react';
import moment from 'moment';
import Link from 'next/link';
const AdjacentPostCard = ({ post, position }) => (
<>
{moment(post.createdAt).format('MMM DD, YYYY')}
{post.title}
{position === 'LEFT' && (
)}
{position === 'RIGHT' && (
)}
);
export default AdjacentPostCard;
### Utils
Now Let's Add a New File called `utils.js` in the main folder:
export const grpahCMSImageLoader = ({ src }) => src;
### Author Component
And Now Let's Add A New File Called `Author.jsx` to components folder to get the author who write this article:
import React from 'react';
import Image from 'next/image';
import { grpahCMSImageLoader } from '../util';
const Author = ({ author }) => (
{author.name}
{author.bio}
);
export default Author;
### Categories Component
Now Let's Get Categories by create a new file called `Categories.jsx`:
import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { getCategories } from '../services';
const Categories = () => {
const [categories, setCategories] = useState([]);
useEffect(() => {
getCategories().then((newCategories) => {
setCategories(newCategories);
});
}, []);
return (
{showSuccessMessage && Comment submitted for review}
);
};
export default CommentsForm;
### Featured Post Card Component
Now Let's Add A New File to get Featured Post Card and the file name is `FeaturedPostCard.jsx` in components folder:
import React from 'react';
import moment from 'moment';
import Image from 'next/image';
import Link from 'next/link';
const FeaturedPostCard = ({ post }) => (
{moment(post.createdAt).format('MMM DD, YYYY')}
{post.title}
{post.author.name}
);
export default FeaturedPostCard;
### Loader Component
And Now Let's Create a Loader file to get a loader style and its file name `Loader.jsx` in components folder:
import React from 'react';
const Loader = () => (
);
export default Loader;
### Post Card Component
Now Let's Add PostCard Component called `PostCard.jsx` in components folder:
import React from 'react';
import Image from 'next/image';
import moment from 'moment';
import Link from 'next/link';
import { grpahCMSImageLoader } from '../util';
const PostCard = ({ post }) => (
{post.title}
{post.author.name}
{moment(post.createdAt).format('MMM DD, YYYY')}
{post.excerpt}
Continue Reading
);
export default PostCard;
### Post Details Component
And Now Let's Add Post Details page in components folder called `PostDetails.jsx`:
import React from 'react';
import moment from 'moment';
const PostDetail = ({ post }) => {
const getContentFragment = (index, text, obj, type) => {
let modifiedText = text;
if (obj) {
if (obj.bold) {
modifiedText = ({text});
}
if (obj.italic) {
modifiedText = ({text});
}
if (obj.underline) {
modifiedText = ({text});
}
}
switch (type) {
case 'heading-three':
return
);
};
export default PostDetail;
And For Now Let's Add Post Widget component in components folder called `PostWidget.jsx`:
import React from 'react';
import moment from 'moment';
const PostDetail = ({ post }) => {
const getContentFragment = (index, text, obj, type) => {
let modifiedText = text;
if (obj) {
if (obj.bold) {
modifiedText = ({text});
}
if (obj.italic) {
modifiedText = ({text});
}
if (obj.underline) {
modifiedText = ({text});
}
}
switch (type) {
case 'heading-three':
return
);
};
export default PostDetail;
### Update `index.jsx` file
Now Let's Update `index.jsx` file:
export { default as PostCard } from './PostCard';
export { default as PostDetail } from './PostDetail';
export { default as Layout } from './Layout';
export { default as Categories } from './Categories';
export { default as Author } from './Author';
export { default as PostWidget } from './PostWidget';
export { default as AdjacentPostCard } from './AdjacentPostCard';
export { default as FeaturedPostCard } from './FeaturedPostCard';
export { default as Comments } from './Comments';
export { default as CommentsForm } from './CommentsForm';
export { default as Loader } from './Loader';
Congratulations ๐ Our Components is finished
### Sections Folder
Now Let's Add A New Folder Called `sections` in the main folder
#### Adjacent Posts section
Now Let's Add A New File called `AdjacentPosts.jsx` in sections folder:
import React, { useState, useEffect } from 'react';
import { AdjacentPostCard } from '../components';
import { getAdjacentPosts } from '../services';
const AdjacentPosts = ({ createdAt, slug }) => {
const [adjacentPost, setAdjacentPost] = useState(null);
const [dataLoaded, setDataLoaded] = useState(false);
useEffect(() => {
getAdjacentPosts(createdAt, slug).then((result) => {
setAdjacentPost(result);
setDataLoaded(true);
});
}, [slug]);
return (
);
};
export default FeaturedPosts;
Now Let's Add A New File Called `index.js` in sections folder to export all sections:
export { default as AdjacentPosts } from './AdjacentPosts';
export { default as FeaturedPosts } from './FeaturedPosts';
### Pages Folder
#### Comments
Now go to `pages` folder then in the folder there is api folder in this folder there is `hello.js` file rename it to `comments.js` and paste the following code to it to get comments:
import { GraphQLClient, gql } from 'graphql-request';
const graphqlAPI = process.env.NEXT_PUBLIC_GRAPHCMS_ENDPOINT;
/** *************************************************************
* Any file inside the folder pages/api is mapped to /api/* and *
* will be treated as an API endpoint instead of a page. *
*************************************************************** */
// export a default function for API route to work
export default async function asynchandler(req, res) {
const graphQLClient = new GraphQLClient((graphqlAPI), {
headers: {
authorization: `Bearer ${process.env.GRAPHCMS_TOKEN}`,
},
});
const query = gql`
mutation CreateComment($name: String!, $email: String!, $comment: String!, $slug: String!) {
createComment(data: {name: $name, email: $email, comment: $comment, post: {connect: {slug: $slug}}}) { id }
}
`;
const result = await graphQLClient.request(query, {
name: req.body.name,
email: req.body.email,
comment: req.body.comment,
slug: req.body.slug,
});
return res.status(200).send(result);
}
#### Catogery
Now In `pages` folder create A New Folder Called `category` and in it let's Add A New File Called `[slug].js` and paste this code in it to get the pages of the categories:
import React from 'react';
import { useRouter } from 'next/router';
import { getCategories, getCategoryPost } from '../../services';
import { PostCard, Categories, Loader } from '../../components';
const CategoryPost = ({ posts }) => {
const router = useRouter();
if (router.isFallback) {
return ;
}
return (
{posts.map((post, index) => (
))}
);
};
export default CategoryPost;
// Fetch data at build time
export async function getStaticProps({ params }) {
const posts = await getCategoryPost(params.slug);
return {
props: { posts },
};
}
// Specify dynamic routes to pre-render pages based on data.
// The HTML is generated at build time and will be reused on each request.
export async function getStaticPaths() {
const categories = await getCategories();
return {
paths: categories.map(({ slug }) => ({ params: { slug } })),
fallback: true,
};
}
And Now let's Add A New Folder in pages folder called `post` and in it make a new file called `[slug].js` to get the pages of the posts:
import React from 'react';
import { useRouter } from 'next/router';
import { PostDetail, Categories, PostWidget, Author, Comments, CommentsForm, Loader } from '../../components';
import { getPosts, getPostDetails } from '../../services';
import { AdjacentPosts } from '../../sections';
const PostDetails = ({ post }) => {
const router = useRouter();
if (router.isFallback) {
return ;
}
return (
<>
category.slug)} />
);
};
export default PostDetails;
// Fetch data at build time
export async function getStaticProps({ params }) {
const data = await getPostDetails(params.slug);
return {
props: {
post: data,
},
};
}
// Specify dynamic routes to pre-render pages based on data.
// The HTML is generated at build time and will be reused on each request.
export async function getStaticPaths() {
const posts = await getPosts();
return {
paths: posts.map(({ node: { slug } }) => ({ params: { slug } })),
fallback: true,
};
}
And Now Let's Update index.js in pages folder:
import { FeaturedPosts } from '../sections/index';
import { PostCard, Categories, PostWidget } from '../components';
import { getPosts } from '../services';
export default function Home({ posts }) {
return (
{posts.map((post, index) => (
))}
);
}
// Fetch data at build time
export async function getStaticProps() {
const posts = (await getPosts()) || [];
return {
props: { posts },
};
}
And Now Write in command Prompt `npm start` and then go to `localhost:3000` to see your project:
When you open it you see it because you don't add any content yet
Go to GraphCMS Dashboard and Then content and add your content in it
When you add content you will see yur website like this:
Deploy Your Site in Vercel
--------------------------
Now Go to [Vercel](https://vercel.com/) and sign in or sign up then Create A New Project:
And Then Connect to Your repo on github:
 And Then Give a name to the project:
And then go to `Environment Variables` and copy the name of the first name of .env file :
1. Name="NEXT\_PUBLIC\_GRAPHCMS\_ENDPOINT" and then copy the value and paste it in the field and click add:
1. Name="GRAPHCMS\_TOKEN" and then copy the value and paste it in the field and click add:
Then Click Deploy
It will take a while
When it will finish you will see this page:
And Congratulations ๐ ๐๐๐ You have Build Your First Blog
[Demo](https://hashnode-post.vercel.app/) [Source Code](https://github.com/Programing-School/Programing-School-Blog)
If you don't know how to create a repo on github go to [This article](https://programing-school.hashnode.dev/learn-git-and-github) to show you how to create it
Finaly Don't forgot to [follow me on hashnode](https://hashnode.com/@Programing-School) and if you have any question reply with your question and I will help you
Thanks for reading
1
1
1
1
1
1
1
1
1
1
[](https://programming-school.hashnode.dev/#write-comment)
[](https://twitter.com/share?url=https%3A%2F%2Fprogramming-school.hashnode.dev%2Fcreate-a-blog-with-next-js&text=Create%20a%20Blog%20with%20Next%20JS%0D%0A%7B%20by%20%40Programing_Pro%20%7D%20from%20%40hashnode%0D%0A)
Share this[](https://twitter.com/share?url=https%3A%2F%2Fprogramming-school.hashnode.dev%2Fcreate-a-blog-with-next-js&text=%20%40Programing-School)[](http://www.reddit.com/submit?title=Create%20a%20Blog%20with%20Next%20JS&selftext=true&text=%20https%3A%2F%2Fprogramming-school.hashnode.dev%2Fcreate-a-blog-with-next-js)
