![\"A](\"/docs/assets/ideal-img/metaschema-demo-how-to-set-up-vscode.5f27f27.314.png\")
\n\nNobody likes typos in JSON. Let's make VSCode catch them for us when writing a project schema.
\n
When writing JSON it's easy to fudge the syntax a bit, usually by missing a quote or a colon. Thankfully, coding tools like VSCode are good at catching these errors. However, a far sneakier problem to identify is when the format of the keys and values in a JSON file don't abide by the internal rules of a program that relies on the JSON you are writing. This can be easily solved by using a JSON metaschema to automatically validate JSON, which will give VSCode the power to warn you when your JSON doesn't match what is expected in a schema.json.
\n\n\nTerm definition: The metaschema is a JSON schema that VSCode can use to regulate a schema.json files It's a schema for a schema; hence, a \"metaschema\". The metaschema can be found at https://schema.takeshape.io/project-schema
\n
In VSCode, go to your Preferences and find the settings.json file.\nIt's under the Settings button in the bottom left corner, under the Settings tab. You can also get there with the Cmd + , shortcut (Ctrl + , on Windows).\nSearch for json and click on the link that says Edit in settings.json.
\nTell VSCode to use the metaschema.\nAdd the following to the json.schemas array:
\n{
\"fileMatch\": [\"schema*json\"],
\"url\": \"https://schema.takeshape.io/project-schema\"
}
In short, this tells VSCode to use the metaschema on every file that matches schema*json, including — but not limited to — schema.json, schema.v2.jneiubciub.json, and schema.v4.json.
\nIf you have a schema.json file handy, feel free to use that; otherwise, you can download one from any of the repos listed at https://github.com/takeshape/patterns.
\nYou should see something like this, where you'll get a yellow squiggly warning line if you try to add a property to the schema that isn't expected.
\nNow VSCode will optimize your workflow by reminding you of any typos in your schema.json right as you type them, instead of when you import the schema. If you have any trouble with this process, feel free to reach out to support.
", "url": "https://pr5203.dev.takeshape.io/docs/guides/how-to-set-up-vscode-to-work-with-metaschema/", "title": "How to set up VSCode to work with the Metaschema", "summary": "Nobody likes typos in JSON. Let's make VSCode catch them for us when writing a project schema.", "date_modified": "2021-05-12T00:00:00.000Z", "author": { "name": "Jaden Baptista" }, "tags": [ "graphql", "meta schema", "vscode" ] }, { "id": "https://pr5203.dev.takeshape.io/docs/guides/working-with-sapper", "content_html": "\n\nIn this article, we will discuss how to use a GraphQL API with Sapper, an application framework powered by Svelte.
\n
In this article, we will discuss how to use a GraphQL API with Sapper, an application framework powered by Svelte.
\nIf you want to jump right into the code, check out the GitHub Repo here.
\nAnd here's a link to the deployed version: https://sapper-takeshape-example.vercel.app/
\n![\"An](\"https://pr5203.dev.takeshape.io/docs/assets/images/sapper-example-animation-with-sapper-47b39e1e153937a6d07469e0da6e635f.gif\")
\nSvelte is a tool for building fast web applications, similar to JavaScript frameworks like React and Vue, svelte aims to make building slick interactive user interfaces easy. But there's a crucial difference.
\nSapper is a framework built on top of Svelte and has taken inspiration from Next.js. Sapper helps you create SEO optimized Progressive Web Apps (PWAs) with file system based routing, similar to Next.js.
\nThis tutorial uses sapper-template to quickly set up the initial Sapper project, which is also the preferred way to initialize a Sapper project.
\nIn your project's root directory, run the following commands in the terminal.
\nnpx degit \"sveltejs/sapper-template#webpack\" sapper-example
cd sapper-example
npm install
npm run dev
The last command npm run dev will start the development server on port 3000. Head over to http://localhost:3000/.
\nHere is how your app will look.
\n![\"The](\"/docs/assets/ideal-img/sapper-homepage-with-sapper.989f96b.320.png\")
To connect to your project, you need your API Endpoint and an API key.
\nIf you haven't created a project yet, follow this guide to do so.
\nIf you already have a project, your API Endpoint will be in the admin UI. In the home tab, look for the \"Useful Snippets\" section.
\nCopy the API Endpoint and save it somewhere secure.
\nTo get an API Key, you'll have to create one. Read our docs on creating an API Key here.
\nIn your project's root directory, run the following command to create a new file named .env to securely store this API key.
\ntouch .env
In your .env file, add the environment variables.
\n# .env
GRAPHQL_API_KEY=\"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"
GRAPHQL_PROJECT=\"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"
To access these environment variables, you need to install the dotenv package, which loads environment variables from the .env file.
\nRun the following command in the terminal to install the dotenv package in your project.
\nnpm install dotenv
Now you also need to configure Sapper to use these environment variables. Modify your src/server.js file like this.
\nrequire('dotenv').config();
import sirv from 'sirv';
import polka from 'polka';
import compression from 'compression';
import * as sapper from '@sapper/server';
const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';
polka() // You can also use Express
.use(compression({ threshold: 0 }), sirv('static', { dev }), sapper.middleware())
.listen(PORT, (err) => {
if (err) console.log('error', err);
});
In the above code, you have imported the dotenv package at the top of the server.js file.
\nrequire(\"dotenv\").config();
Restart your development server by closing it using Ctrl + C and starting it again using npm run dev.
\nWith your development server still running, head over to http://localhost:3000/blog. You will see a page similar to this, which lists all the posts with their links.
\n![\"The](\"/docs/assets/ideal-img/sapper-recent-posts-with-sapper.ce0e3c4.320.png\")
These are the sample blog posts that come with the sapper-template and are present in src/routes/blog/_posts.js. You need to update this /blog route to show posts fetched from the GraphQL API.
\nEvery post in the posts array has a title and a slug, shown on the blog page. You need to create a similar GraphQL query that fetches the title and slug of each post.
\nOn your dashboard, navigate to the API tab.
\nCopy and Paste the following GraphQL query into the API Explorer.
\nquery AllPosts {
allPosts: getPostList {
items {
_id
title
slug
}
}
}
Run this query; you will see an output similar to this.
\n![\"The](\"/docs/assets/ideal-img/sapper-api-explorer-query-with-sapper.c806231.320.png\")
In Sapper, Page is a Svelte component written in .svelte files. Server routes are modules written in .js files that export functions corresponding to HTTP methods like get, post, etc. Each function receives HTTP request and response objects as arguments, plus a next function.
\nThe index.json.js file under routes/blog directory is a server route, which currently fetches data from the posts array in the _posts.js file. You need to update this server route to fetch posts from the GraphQL API.
\nYou will need to install the node-fetch package to make the API requests. Run the following command in the terminal to install node-fetch.
\nnpm install node-fetch
Update src/routes/blog/index.json.js file like this and restart your development server.
\nconst fetch = require('node-fetch');
export async function get(req, res) {
const { GRAPHQL_API_KEY, GRAPHQL_PROJECT } = process.env;
const data = await fetch(`https://___apiDomain___/project/${GRAPHQL_PROJECT}/graphql`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${GRAPHQL_API_KEY}`
},
body: JSON.stringify({
query: `
\t\t\t\t\t query AllPosts {
\t\t\t\t\t\t allPosts: getPostList {
\t\t\t\t\t\t\t items {
\t\t\t\t\t\t\t _id
\t\t\t\t\t\t\t title
\t\t\t\t\t\t\t slug
\t\t\t\t\t\t\t }
\t\t\t\t\t\t }
\t\t\t\t\t }
`
})
});
const response = await data.json();
const posts = await JSON.stringify(response.data.allPosts.items);
res.writeHead(200, {
'Content-Type': 'application/json'
});
res.end(posts);
}
In the above code, you first import the node-fetch package.
\nconst fetch = require(\"node-fetch\");
Then inside the get function, you extract the environment variables from process.env.
\nconst { GRAPHQL_API_KEY, GRAPHQL_PROJECT } = process.env;Now, you make the POST request to the GraphQL API using the fetch method.
Now, you make the POST request to GraphQL API using the fetch method.
\nconst data = await fetch(`https://___apiDomain___/project/${GRAPHQL_PROJECT}/graphql`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${GRAPHQL_API_KEY}`
},
body: JSON.stringify({
query: `
\t\t\t\t\t query AllPosts {
\t\t\t\t\t\t allPosts: getPostList {
\t\t\t\t\t\t\t items {
\t\t\t\t\t\t\t _id
\t\t\t\t\t\t\t title
\t\t\t\t\t\t\t slug
\t\t\t\t\t\t\t }
\t\t\t\t\t\t }
\t\t\t\t\t }
`
})
});
You pass the API key under Authorization in headers. The GraphQL query inside the body is the same as discussed above in the API Explorer.
\nFinally, you return the posts in the response using res.end(posts).
\nconst response = await data.json();
const posts = await JSON.stringify(response.data.allPosts.items);
res.writeHead(200, {
'Content-Type': 'application/json'
});
res.end(posts);
In Sapper, Page component have a optional preload function that runs before the component is created. As the name suggests this function, preloads the data that the page depends upon.
\nPreload is the Sapper equivalent to getInitialProps in Next.js or asyncData in Nuxt.js. You can read more about Preloading here.
\nOpen src/routes/blog/index.svelte file in your code editor. Since index.json route is inside blog directory, it can also be referenced as blog.json.
\n<script context=\"module\">
\texport function preload() {
\t return this.fetch(`blog.json`)
\t\t\t.then((r) => r.json()).then((posts) => {
\t\t\t\treturn { posts };
\t\t\t});
\t}
</script>
You fetch data from blog.json route using this.fetch. This method is quite similar to fetch API with some additional features like requesting data based on user's session. You can read more about this.fetch here.
\nIn Svelte, you can iterate over any array or array like value using an #each block as shown here. Here (post._id) is the key that uniquely identifies each post. You can read more about #each block here.
\n<ul>
{#each posts as post (post._id)}
\t <li><a rel=\"prefetch\" href=\"blog/{post.slug}\">{post.title}</a></li>
{/each}
</ul>
You don't need to make any other change in index.svelte file except for adding a key in the #each block like shown above.
\nNavigate to http://localhost:3000/blog in your browser; you will notice that posts have been updated.
\n![\"The](\"/docs/assets/ideal-img/sapper-more-posts-with-sapper.6639ef7.320.png\")
You can now delete the _posts.js file in the routes/blog directory.
\nSince the individual post routes don't exist yet so these links will result in a 404 error, you will create them in the next section.
\nIn Sapper, you can create dynamic routes by adding brackets to a page name, ([param]), where the param is the dynamic parameter that is the slug of the article.
\nYou will notice that a file named [slug].svelte already exists in the src/routes/blog directory.
\nYou need to update the server route used in this file so when a user clicks on a post, the data corresponding to that post is fetched and is displayed with the blog/[slug] route.
\nUpdate blog/[slug].json.js file like this.
\nconst fetch = require('node-fetch');
export async function get(req, res, next) {
const { slug } = req.params;
const { GRAPHQL_API_KEY, GRAPHQL_PROJECT } = process.env;
const data = await fetch(`https://___apiDomain___/project/${GRAPHQL_PROJECT}/graphql`, {
method: 'post',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${GRAPHQL_API_KEY}`
},
body: JSON.stringify({
query: `
query PostBySlug($slug: String) {
post: getPostList(where: {slug: {eq: $slug}}) {
items {
_id
title
deck
bodyHtml
}
}
}`,
variables: {
slug: slug
}
})
});
const response = await data.json();
const post = JSON.stringify(response.data.post.items[0]);
res.writeHead(200, {
'Content-Type': 'application/json'
});
res.end(post);
}
The above code is quite similar to the server route code discussed in the last section, with few key differences.
\nThis route fetches individual post data based on the slug provided, which is accessed via req.params.
\nconst { slug } = req.params;
The GraphQL query in the above code fetches post matching the slug using where: { slug: { eq: $slug } }. In the query, bodyHtml corresponds to the HTML body of the post and deck is the short excerpt of the post.
query PostBySlug($slug: String) {
post: getPostList(where: { slug: { eq: $slug } }) {
items {
_id
title
deck
bodyHtml
}
}
}
The slug is made available to the GraphQL query via variables.
\nvariables: {
slug: slug,
},
Update blog/[slug].svelte file like this.
\nscript context=\"module\">
\texport async function preload({ params }) {
\t\tconst res = await this.fetch(`blog/${params.slug}.json`);
\t\tconst data = await res.json();
\t\tif (res.status === 200) {
\t\t\treturn { post: data };
\t\t} else {
\t\t\tthis.error(res.status, data.message);
\t\t}
\t}
</script>
<script>
\texport let post;
</script>
<style>
\t.content :global(h2) {
\t\tfont-size: 1.4em;
\t\tfont-weight: 500;
\t}
\t.content :global(pre) {
\t\tbackground-color: #f9f9f9;
\t\tbox-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.05);
\t\tpadding: 0.5em;
\t\tborder-radius: 2px;
\t\toverflow-x: auto;
\t}
\t.content :global(pre) :global(code) {
\t\tbackground-color: transparent;
\t\tpadding: 0;
\t}
\t.content :global(ul) {
\t\tline-height: 1.5;
\t}
\t.content :global(li) {
\t\tmargin: 0 0 0.5em 0;
\t}
</style>
<svelte:head>
\t<title>{post.title}</title>
\t<meta name=\"Description\" content={post.deck}>
</svelte:head>
<h1>{post.title}</h1>
<div class=\"content\">
\t{@html post.bodyHtml}
</div>
The preload function takes two arguments, page and session. Here page is an object equivalent to { host, path, params, query } and session is used to pass data such as environment variables from the server.
\nIn the above preload function, you access the page object's params property and pass the slug of the page to the server route.
\nIf you console.log() the page object, you will see all the data available via the page object. Here is how this will look like.
\n{
host: 'localhost:3000',
path: '/blog/jump-aboard-new-treasure-island-edition',
query: {},
params: { slug: 'jump-aboard-new-treasure-island-edition' }
}
The post is returned based on the status code of the response. this.error is a method in Sapper for handling errors and invalid routes. You can read more about it here.
\nif (res.status === 200) {
return { post: data };
} else {
this.error(res.status, data.message);
}
You only need to update post.body to post.bodyHtml in the div with class=\"content\" in [slug].svelte file like.
\n<div class=\"content\">
\t{@html post.bodyHtml}
</div>
In Svelte, you can render HTML directly into a component using the @html tag like shown above. You can read more about this tag here.
\nAnd its done.
\n![\"An](\"/docs/assets/ideal-img/sapper-post-with-sapper.76073b9.320.png\")
Try clicking on any of the posts on /blog route or head over to http://localhost:3000/blog/jump-aboard-new-treasure-island-edition. You will see a page similar to this.
\nYou can view the finished website here and the code for the project here.
\nIn this article, you learned how to use a GraphQL API with Sapper, an application framework powered by Svelte.
\nWe also discussed how to use the API Explorer and how to use the preload function in Sapper.
\nWith just a few simple modifications and updates in your Sapper project, you can easily achieve a perfect Lighthouse score. Amazing, right?
\nHere are some additional resources that can be helpful.
\n\nHappy coding!
", "url": "https://pr5203.dev.takeshape.io/docs/guides/working-with-sapper", "title": "How to Use Sapper", "summary": "In this article, we will discuss how to work with Sapper, an application framework powered by Svelte.", "date_modified": "2021-01-26T00:00:00.000Z", "author": { "name": "Ashutosh K Singh" }, "tags": [ "graphql", "sapper" ] }, { "id": "https://pr5203.dev.takeshape.io/docs/guides/how-to-build-a-blog-with-nextjs-part-2", "content_html": "\n\nThis article assumes that you have read \"How to build a blog with NextJS\" if not, I will recommend reading it because this tutorial builds on top of the project created in the that article.
\n
![\"A](\"/docs/assets/ideal-img/nextjs-blog-part-2-how-to-build-a-blog-part-2.c38c9cf.320.png\")
You can check out the final project here and the complete code on GitHub.
\n.env.example file and rename it to .env.In the last article, we created the following environment variables in the .env file to store your project's API keys.
# .env
GRAPHQL_API_KEY=\"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"
GRAPHQL_PROJECT=\"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"
By default, these environment variables are not exposed to the browser, but we will need to access them from our browser as we develop the project in this tutorial.
\nUsing the NEXT_PUBLIC_ prefix exposes the environment variable to the browser.
Update .env file like this.
# .env
NEXT_PUBLIC_GRAPHQL_API_KEY=\"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"
NEXT_PUBLIC_GRAPHQL_PROJECT=\"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"
You will also need to update the lib/api.js file to access these new environment variables.
Update API_ENDPOINT and GRAPHQL_API_KEY variables in lib/api.js like this.
// lib/api.js
const API_ENDPOINT = `https://___apiDomain___/project/${process.env.NEXT_PUBLIC_GRAPHQL_PROJECT}/graphql`;
const GRAPHQL_API_KEY = process.env.NEXT_PUBLIC_GRAPHQL_API_KEY;
In this section, we will discuss how to display published or updated date on posts.
\nThe first step is to update the queries in getAllPosts() and getPostBySlug() functions to fetch _createdAt, which, as it sounds, refers to the date when you created the post.
You can also use _updatedAt to show the date when the post was modified or updated.
In this tutorial, we will show only the created date of the post.
\nModify the getAllPosts() and getPostBySlug() functions and in lib/api.js:
// get all posts to display on landing page
export async function getAllPosts() {
const data = await fetchData(
`
query AllPosts {
allPosts: getPostList {
items {
_id
title
deck
slug
**author {
name
slug
}
_createdAt
tags{
name
_id
}**
}
}
}
`
);
return data.allPosts.items;
}
// get single post based on the slug passed
export async function getPostBySlug(slug) {
const data = await fetchData(
`
query PostBySlug($slug: String) {
post: getPostList(where: {slug: {eq: $slug}}) {
items {
_id
title
slug
deck
bodyHtml
**author{
name
slug
}
tags{
name
_id
}
_createdAt**
}
}
}`,
{
variables: {
slug
}
}
);
return data.post.items[0];
}
You will notice that the queries have also been updated to include the following.
\n author {
name
slug
}
tags {
name
_id
}
We will use the above data when making dynamic routes to the author and tag pages. You can ignore them for now; we will discuss them in the next sections.
Now, update the .map() method on posts in pages/index.js to include _createdAt.
{
posts.length > 0 &&
posts.map((post) => (
<PostContainer
key={post._id}
title={post.title}
slug={post.slug}
author={post.author}
deck={post.deck}
date={post._createdAt}
/>
));
}
{
posts.length > 0 &&
posts.map((post) => (
<PostContainer
key={post._id}
title={post.title}
slug={post.slug}
author={post.author}
deck={post.deck}
date={post._createdAt}
/>
));
}
In the above code, we have also modified the JSX expression to check if the posts array is empty or not? And show the PostContainer component only when the posts array is not empty, i.e., posts.length>0.
The next step is to update the PostContainer component to show this date.
The _createdAt returned from the GraphQL API looks something like this.
\"_createdAt\": \"2020-10-27T05:33:49.751Z\",
We convert this date into a more human-readable form by passing date into JavaScript Date constructor and then using it with .toDateString(). Read more about .toDateString() here.
// components/post-container.js
import Link from 'next/link';
import styles from '../styles/PostContainer.module.css';
export default function PostContainer({ title, deck, slug, author, date }) {
const createdDate = new Date(date);
return (
<div className={styles.container}>
<div className={styles.title}>
<Link href={`/blog/${slug}`}>{title}</Link>
</div>
<div className={styles.author}> {author.name}</div>
<div className={styles.date}> {createdDate.toDateString()}</div>
<div className={styles.deck}>
<p>{deck}</p>
</div>
<div className={styles.read}>
<Link href={`/blog/${slug}`}>Read More</Link>
</div>
</div>
);
}
Add the following CSS for the date in styles/PostContainer.module.css.
.date {
color: inherit;
font-family: monospace;
font-size: 1rem;
padding: 5px 10px;
display: inline-block;
margin: 0 2px;
font-weight: 300;
}
Run the following command in your project's root directory to start the development server.
\nnpm run dev
Head over to http://localhost:3000 , here is how your app will look like.
\n![\"A](\"/docs/assets/ideal-img/nextjs-blog-part-2-date-how-to-build-a-blog-part-2.8fdb22d.320.png\")
Now, to show this date on blog page, update the blog/[slug].js file like this.
// pages/blog/[slug].js
import Head from 'next/head';
import Link from 'next/link';
import styles from '..//../styles/Posts.module.css';
import { getAllSlugs, getPostBySlug } from '../../lib/api';
import Header from '../../components/header';
function Posts({ post }) {
const createdAt = new Date(post._createdAt);
return (
<div>
<Head>
<title key={post.title}>{post.title}</title>
</Head>
<div className={styles.container}>
<div className={styles.header}>
<Header title={post.title} />
<h2 className={styles.home}>
<Link href={`/`}>🏠 Home</Link>
</h2>
</div>
**<div className={styles.info}>
<div className={styles.author}>By: {post.author.name}</div>
<div className={styles.date}> {createdAt.toDateString()}</div>
</div>**
<div className={styles.body}>
<main dangerouslySetInnerHTML={{ __html: post.bodyHtml }} />
</div>
</div>
</div>
);
}
export async function getStaticPaths() {
const allPosts = await getAllSlugs();
const paths = allPosts.map((post) => ({
params: { slug: post.slug }
}));
return {
paths,
fallback: false
};
}
export async function getStaticProps({ params }) {
const post = await getPostBySlug(params.slug);
return {
props: {
post
}
};
}
export default Posts;
Add the styling for date, info and author div in styles/Posts.module.css.
.info {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 2rem;
font-size: 1.5rem;
}
.author {
margin: 5px;
font-weight: 300;
font-family: 'Syne Mono', monospace;
width: fit-content;
}
.date {
color: inherit;
font-family: monospace;
font-size: 1rem;
padding: 5px 10px;
display: inline-block;
margin: 0 2px;
font-weight: 300;
}
Here is how the blog page will look.
\n![\"A](\"/docs/assets/ideal-img/nextjs-blog-part-2-date-article-how-to-build-a-blog-part-2.eb9fbb9.320.png\")
In this section, we will first display tags on posts and then create dynamic routes to each tag where all the posts having that particular tag are shown.
Since, we have already modified the functions to get tags from the GraphQL API, we just need modify the .map() method in index.js to pass tags to the PostContainer component.
{
posts.length > 0 &&
posts.map((post) => (
<PostContainer
key={post._id}
title={post.title}
slug={post.slug}
author={post.author}
deck={post.deck}
date={post._createdAt}
tags={post.tags}
/>
));
}
Now, update the PostContainer component to show the tags.
export default function PostContainer({ title, deck, slug, author, tags, date }) {
const updatedDate = new Date(date);
return (
<div className={styles.container}>
<div className={styles.title}>
<Link href={`/blog/${slug}`}>{title}</Link>{' '}
</div>
<div className={styles.author}> {author.name}</div>
<div className={styles.date}> {updatedDate.toDateString()}</div>
<div className={styles.tags}>
{tags.map((tag) => (
<Link key={tag._id} href={`/tag/${tag._id}`}>
<div className={styles.tag}>{tag.name}</div>
</Link>
))}
</div>
<div className={styles.deck}>
<p>{deck}</p>
</div>
<div className={styles.read}>
<Link href={`/blog/${slug}`}>Read More</Link>
</div>
</div>
);
}
We have added the link to tags but these routes doesn't exist yet.
\nBefore we create them, add the CSS to style these tags in styles/PostContainer.module.css.
.tags {
font-size: 0.9rem;
padding: 5px;
display: flex;
}
.tag {
background-color: rgb(224, 201, 238);
margin: 2px;
padding: 6px;
font-weight: 600;
border-radius: 20px;
}
.tag:hover,
.tag:focus,
.tag:active {
font-weight: 800;
cursor: pointer;
}
Here is how the post containers look like with these tags.
\n![\"A](\"/docs/assets/ideal-img/nextjs-blog-part-2-tag-how-to-build-a-blog-part-2.1a7c5b1.320.png\")
Now, add these tags to blog/[slug].js. Add the following code for tags in between author and date divs inside info div.
<div className={styles.info}>
<div className={styles.author}>By: {post.author.name}</div>
<div className={styles.tags}>
{post.tags.map((tag) => (
<Link key={tag._id} href={`/tag/${tag._id}`}>
<div className={styles.tag}>{tag.name}</div>
</Link>
))}
</div>
<div className={styles.date}> {createdAt.toDateString()}</div>
</div>
Add the following CSS in styles/Posts.module.css to style the tags.
.tags {
font-size: 0.9rem;
padding: 5px;
display: flex;
}
.tag {
background-color: rgb(224, 201, 238);
margin: 2px;
padding: 6px;
font-weight: 600;
border-radius: 20px;
}
.tag:hover,
.tag:focus,
.tag:active {
font-weight: 800;
cursor: pointer;
}
Here is how your blog page will look.
\n![\"A](\"/docs/assets/ideal-img/nextjs-blog-part-2-date-tag-how-to-build-a-blog-part-2.4f403bb.320.png\")
To create dynamic routes to tags, we need to create a function in lib/api.js that takes the _id of tag as an argument and fetches data or posts having that tag.
Inside api.js create two functions named getPostsByTag() and getAllPostsTags() like this.
//get posts by tags
export async function getPostsByTag(_id) {
const data = await fetchData(
`
query PostsByTag($_id: ID!) {
getTags(_id: $_id) {
postSet {
items {
_id
title
deck
slug
author {
name
slug
}
tags{
name
_id
}
_createdAt
}
}
name
}
}
`,
{
variables: {
_id
}
}
);
return data.getTags;
}
// get all tags of the posts to generate static paths
export async function getAllPostsTags() {
const data = await fetchData(`
{
allTags: getTagsList {
items {
_id
name
}
}
}
`);
return data.allTags.items;
}
The function getAllPostsTags() fetches the _id of all tags to generate static paths for getStaticPaths() function.
Now, run the following command in your project's root directory to create [_id].js under tag directory in the pages folder.
mkdir pages/tag
cd pages/tag
touch [_id].js
Add the following code to tag/[_id].js
// pages/tag/[slug].js
import Head from 'next/head';
import Link from 'next/link';
import styles from '..//../styles/Tag.module.css';
import { getAllPostsTags, getPostsByTag } from '../../lib/api';
import Header from '../../components/header';
import PostContainer from '../../components/post-container';
function Tag({ post }) {
return (
<div>
<Head>
<title key={post.name}>{post.name}</title>
</Head>
<div className={styles.container}>
<div className={styles.header}>
<Header title={`Tag - ${post.name}`} />
<h2 className={styles.home}>
<Link href={`/`}>🏠 Home</Link>
</h2>
</div>
<div className={styles.posts}>
<div className={styles.posts_body}>
{post.postSet.items.map((post) => (
<PostContainer
key={post._id}
title={post.title}
slug={post.slug}
author={post.author}
deck={post.deck}
tags={post.tags}
date={post._createdAt}
/>
))}
</div>
</div>
</div>
</div>
);
}
export async function getStaticPaths() {
const allTags = await getAllPostsTags();
const paths = allTags.map((tag) => ({
params: { _id: tag._id }
}));
return {
paths,
fallback: false
};
}
export async function getStaticProps({ params }) {
const post = await getPostsByTag(params._id);
return {
props: {
post
}
};
}
export default Tag;
To style this page, run the following command in your root directory to create Tag.module.css under the styles directory.
cd styles
touch Tag.module.css
Add the following CSS to Tag.module.css.
/* Tag.module.css */
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: #fafafa;
}
.home {
background-color: #1abc9c;
font-size: 1.5rem;
color: white;
text-align: center;
display: inline;
padding: 5px 7.5px;
margin: 5px;
cursor: pointer;
border-radius: 20px;
}
.home:hover,
.home:active,
.home:focus {
background-color: teal;
}
.header {
padding: 0.5rem 1.5rem;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
background-color: white;
}
@media only screen and (max-width: 500px) {
.header {
display: inline;
}
.home {
font-size: 1.2rem;
}
}
Restart your development server and head over to http://localhost:3000/tag/1badb385-9905-4930-9b0b-3b538b748bc1, i.e., the page for Pharetra tag.
\nHere is how this page will look.
\n![\"A](\"/docs/assets/ideal-img/nextjs-blog-part-2-listing-how-to-build-a-blog-part-2.54c6ef5.320.png\")
Here is a GIF illustrating the tag routes.
\n![\"A](\"https://pr5203.dev.takeshape.io/docs/assets/images/nextjs-blog-part-2-animation-how-to-build-a-blog-part-2-e94a89622e40ee79f578a85981549267.gif\")
\nIn this section, we will add dynamic routes to the author page and then create the author page with the author's bio, image, and posts written by them.
First, create getAllAuthorSlugs() and getAuthorBySlug() functions in lib/api.js to fetch author data.
Add the following code in lib/api.js file.
// get all slugs of the authors to generate static paths
export async function getAllAuthorSlugs() {
const data = await fetchData(
`
{
allAuthors: getAuthorList {
items {
slug
}
}
}
`
);
return data.allAuthors.items;
}
// get single author based on the slug passed
export async function getAuthorBySlug(slug) {
const data = await fetchData(
`
query AuthorBySlug($slug: String) {
author: getAuthorList(where: {slug: {eq: $slug}}) {
items {
biographyHtml
name
photo {
path
}
slug
postSet {
total
items {
title
deck
_id
slug
tags{
name
_id
}
_createdAt
}
}
}
}
}`,
{
variables: {
slug
}
}
);
return data.author.items[0];
}
The above function getAllAuthorSlugs() returns all authors' slugs to generate static paths, whereas the function getAuthorBySlug() fetches a single author's data based on its unique slug.
Since we have already modified the getAllPosts() function in the last section to fetch the author's slug, we can adjust the PostContainer component to add dynamic routes to the author page.
// components/post-container.js
export default function PostContainer({ title, deck, slug, author, date, tags }) {
const createdDate = new Date(date);
return (
<div className={styles.container}>
<div className={styles.title}>
{' '}
<Link href={`/blog/${slug}`}>{title}</Link>{' '}
</div>
{author && (
<Link href={`/author/${author.slug}`}>
<div className={styles.author}> {author.name}</div>
</Link>
)}
<div className={styles.date}> {createdDate.toDateString()}</div>
<div className={styles.tags}>
{tags.map((tag) => (
<Link key={tag._id} href={`/tag/${tag._id}`}>
<div className={styles.tag}>{tag.name}</div>
</Link>
))}
</div>
<div className={styles.deck}>
<p>{deck}</p>
</div>
<div className={styles.read}>
<Link href={`/blog/${slug}`}>Read More</Link>
</div>
</div>
);
}
Update the CSS for author in styles/PostContainer.module.css like this.
.author {
color: inherit;
font-family: 'Syne Mono', monospace;
font-style: italic;
font-size: 1rem;
padding: 5px 10px;
display: inline-block;
margin: 0 2px;
font-weight: 300;
}
.author:hover,
.author:focus,
.author:active {
font-weight: 900;
cursor: pointer;
text-decoration: underline;
}
To style the author page, create a file named Authors.module.css under the styles directory by running the following command.
cd styles
touch Authors.module.css
Add the following CSS to Authors.module.css.
/* Authors.module.css */
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: #fafafa;
}
.home {
background-color: #1abc9c;
font-size: 1.5rem;
color: white;
text-align: center;
display: inline;
padding: 5px 7.5px;
margin: 5px;
cursor: pointer;
border-radius: 20px;
}
.home:hover,
.home:active,
.home:focus {
background-color: teal;
}
.header {
padding: 0.5rem 1.5rem;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
background-color: white;
}
.author_bio {
display: flex;
margin: 10px 40px;
justify-content: space-around;
align-items: center;
}
.body {
font-size: 1.2rem;
margin: 0 10px;
width: 800px;
}
.posts {
margin: 10px 50px;
}
.posts_title {
font-size: 1.7rem;
font-weight: 400;
width: fit-content;
padding: 10px;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.posts_body {
display: flex;
flex-direction: column-reverse;
}
@media only screen and (max-width: 500px) {
.header {
display: inline;
}
.home {
font-size: 1.2rem;
}
}
@media only screen and (max-width: 768px) {
.author_bio {
flex-direction: column;
justify-content: center;
margin: 10px 20px;
}
.body {
margin: 0;
width: 300px;
height: 10rem;
overflow: hidden;
}
.posts {
margin: 10px 20px;
}
}
Now, run the following command to create [slug].js under pages/author directory.
mkdir pages/author
cd pages/author
touch [slug].js
Add the following code to author/[slug].js.
// pages/author/[slug].js
import Head from 'next/head';
import Link from 'next/link';
import styles from '..//../styles/Authors.module.css';
import { getAllAuthorSlugs, getAuthorBySlug } from '../../lib/api';
import Header from '../../components/header';
import PostContainer from '../../components/post-container';
function Authors({ author }) {
return (
<div>
<Head>
<title key={author.name}>{author.name}</title>
</Head>
<div className={styles.container}>
<div className={styles.header}>
<Header title={author.name} />
<h2 className={styles.home}>
<Link href={`/`}>🏠 Home</Link>
</h2>
</div>
<div className={styles.author_bio}>
<img width={250} height={300} src={`https://images.<domain>.<tld>/${author.photo.path}`} alt={author.name} />
<div className={styles.body}>
<main dangerouslySetInnerHTML={{ __html: author.biographyHtml }} />
</div>
</div>
<div className={styles.posts}>
<div className={styles.posts_title}>Posts by {author.name}</div>
<div className={styles.posts_body}>
{author.postSet.items.map((post) => (
<PostContainer
key={post._id}
title={post.title}
slug={post.slug}
deck={post.deck}
date={post._createdAt}
tags={post.tags}
/>
))}
</div>
</div>
</div>
</div>
);
}
export async function getStaticPaths() {
const allAuthors = await getAllAuthorSlugs();
const paths = allAuthors.map((author) => ({
params: { slug: author.slug }
}));
return {
paths,
fallback: false
};
}
export async function getStaticProps({ params }) {
const author = await getAuthorBySlug(params.slug);
return {
props: {
author
}
};
}
export default Authors;
Focus on how we are displaying author's image.
\n<img width={250} height={300} src={`https://images.<domain>.<tld>/${author.photo.path}`} alt={author.name} />
The getAuthorBySlug() function returns the author's photo's path, which looks something like this.
\"path\": \"6f78e8ac-527a-4e09-9c5e-510876b096bf/dev/b74d8b18-b7bb-4a34-9e2f-77deb1c5fc2c/robert-l-stevenson.png\"
We prefix the path with https://images.<domain>.<tld>/ to get the actual image URL.
An alternative to prefixing the path with https://images.<domain>.<tld>/ would be to install the @takeshape/routing module by running the following command.
npm i @takeshape/routing
And then, use the getImageUrl() function from @takeshape/routing and pass the path to the author's photo in this function.
import {getImageUrl} from '@takeshape/routing';
...
function Authors({ author }) {
...
<img
width={250}
height={300}
src={getImageUrl(author.photo.path)}
alt={author.name}
/>
...
}
Here is how http://localhost:3000/author/lewis-carroll, i.e., the page for Lewis Carroll looks.
\n![\"A](\"/docs/assets/ideal-img/nextjs-blog-part-2-author-how-to-build-a-blog-part-2.f749c91.320.png\")
Now update blog/[slug].js to add the links to author's page like this.
function Posts({ post }) {
const createdAt = new Date(post._createdAt);
return (
<div>
<Head>
<title key={post.title}>{post.title}</title>
</Head>
<div className={styles.container}>
<div className={styles.header}>
<Header title={post.title} />
<h2 className={styles.home}>
<Link href={`/`}>🏠 Home</Link>
</h2>
</div>
<div className={styles.info}>
<div className={styles.author}>
<Link href={`/author/${post.author.slug}`}>
<a> By: {post.author.name}</a>
</Link>
</div>
<div className={styles.tags}>
{post.tags.map((tag) => (
<Link key={tag._id} href={`/tag/${tag._id}`}>
<div className={styles.tag}>{tag.name}</div>
</Link>
))}
</div>
<div className={styles.date}> {createdAt.toDateString()}</div>
</div>
<div className={styles.body}>
<main dangerouslySetInnerHTML={{ __html: post.bodyHtml }} />
</div>
</div>
</div>
);
}
You can click on author's name on blog posts and then go to their respective page.
\nIn this section, we will add a button that sorts the posts on the landing page based on their creation date, i.e., _createdAt.
You can also sort them based on _updatedAt, i.e., based on the updated date.
First we need to update the getAllPosts() function in lib/api.js to add the sorting queries.
// get all posts to display on landing page
export async function getAllPosts(order) {
const data = await fetchData(
`
query AllPosts($order : String = \"desc\") {
allPosts: getPostList(sort: {field: \"_createdAt\", order: $order}) {
items {
_id
title
deck
slug
author {
name
slug
}
tags {
name
_id
}
_createdAt
}
}
}
`,
{
variables: {
order
}
}
);
return data.allPosts.items;
}
In the above code, we have added an order variable in the AllPosts query; we have also given this variable a default value of desc, i.e., descending order.
Here field represents the data on which sorting is done, you can change it to _updatedAt, and the posts will sort based on the date they were updated.
query AllPosts($order : String = \"desc\") {
allPosts: getPostList(sort: {field: \"_createdAt\", order: $order}) {
...
}
}
You can test out this query in the API Explorer of your project.
\nThe next step is to import the useState() hook in index.js.
// pages/index.js
import React, { useState } from 'react';
import Head from 'next/head';
import styles from '../styles/Home.module.css';
import Header from '../components/header';
import PostContainer from '../components/post-container';
import { getAllPosts } from '../lib/api';
Now, define a state named post and direction to track the order of sorting, i.e., asc or desc. Give desc as the initial value of direction state, same as that of the order variable's default value.
We will pass the posts argument as the initial state of the post state, and instead of using the .map() method on the posts argument, we will use it on the post state.
export default function Home({ posts }) {
const [post, setPost] = useState(posts);
const [direction, setDirection] = useState('desc');
return (
<div className={styles.container}>
<Head>
<title>NextJS Blog</title>
</Head>
<Header title=\"NextJS Blog\" />
{post.length > 0 &&
post.map((post) => (
<PostContainer
key={post._id}
title={post.title}
slug={post.slug}
author={post.author}
deck={post.deck}
date={post._createdAt}
tags={post.tags}
/>
))}
</div>
);
}
When the button is clicked, we will make a new request to the GraphQL API but this time we will pass desc or asc in the getAllPosts function based on the direction state.
Now, add the code for button in index.js just above the .map() method on post.
<div className={styles.sort}>
<button onClick={setValueAndOrder}>Sort - Current Order {direction.toLocaleUpperCase()}</button>
</div>
Now, create the setValueAndOrder() function which is passed to onClick event of sort button.
Add the following code above return.
const setValueAndOrder = async (e) => {
await e.preventDefault();
if (direction == 'asc') {
const res = await getAllPosts('desc');
await setPost(res);
await setDirection('desc');
}
if (direction == 'desc') {
const res = await getAllPosts('asc');
await setPost(res);
await setDirection('asc');
}
};
The above code is a simple if/else statement without the else. It checks the current value of direction and passes the opposite value to the getAllPosts() function; then it updates the post state with the new response from the GraphQL API. Finally, the function updates the value of direction.
Add the following CSS to styles/Home.module.css to style this button.
.sort button {
background-color: #1abc9c;
font-size: 1.3rem;
color: white;
text-align: center;
padding: 10px;
width: fit-content;
cursor: pointer;
margin: 0 5px;
border-radius: 30px;
}
Since this project was bootstrapped with sample data from the GraphQL API, all the posts were created simultaneously.
\nYou are free to add any sample or dummy data you want.
\nIn your Dashboard, navigate to the Data tab and select the Tags shape in the sidebar. Select New Tags. When you're done creating your data, ensure the new content is Enabled.
\nHead over to http://localhost:3000 and click the sort button and see your tags in action.
\nIn this section, we will add a search bar on the landing page to search among the posts based on the user's query. This functionality is quite helpful when you have a large number of posts on your blog.
\nFirst, create a function named searchPosts() in lib/api.js. This function takes the searched query as argument and search for the same using getPostList(terms: $terms).
// search for posts based on the query passed
export async function searchPosts(terms) {
const data = await fetchData(
`
query SearchPosts ($terms: String ) {
allPosts: getPostList(terms: $terms) {
items {
_id
title
deck
slug
author {
name
slug
}
tags{
name
_id
}
_createdAt
}
}
}
`,
{
variables: {
terms
}
}
);
return data.allPosts.items;
}
In your pages/index.js add the following code to create the form for searching.
<form onSubmit={handleSubmit} className={styles.form}>
<input
className={styles.input}
placeholder=\"Search for Posts ... \"
value={query}
onChange={(e) => setQuery(e.target.value)}
/>
<button>Search</button>
</form>
Now, add the following CSS to styles/Home.module.css to style this button.
.form {
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
margin: 10px 0;
}
.input {
border: none;
background-color: #e6e6e6;
padding: 10px;
outline: none;
color: black;
font-size: 1.4rem;
border-radius: 20px;
margin-right: 10px;
}
.form button {
background-color: #1abc9c;
font-size: 1.4rem;
color: white;
text-align: center;
padding: 10px;
cursor: pointer;
border-radius: 30px;
}
.form button:hover,
.form button:active,
.form button:focus {
background-color: teal;
}
@media only screen and (max-width: 640px) {
.form {
display: grid;
width: 100%;
grid-gap: 4px;
}
.form button,
.input {
font-size: 1rem;
margin-right: 0;
}
.sort {
display: flex;
justify-content: center;
align-items: center;
}
.sort button {
font-size: 1rem;
}
}
Since we have not yet created query state where user's input is stored and the handleSubmit() function that is triggered when the Search button is clicked, you will see and error on http://localhost:3000.
Lets create the function handleSubmit() in index.js.
First, import useRouter hook in index.js. useRouter hook lets you access the router object inside any function component with in your app. You can read more about useRouter() hook here.
Add the following code at the top of index.js file along with other imports.
import { useRouter } from \"next/router\";
Now, add the following code for query state and handleSubmit() function.
export default function Home({ posts }) {
const [post, setPost] = useState(posts);
const [direction, setDirection] = useState(\"desc\");
const [query, setQuery] = useState(\"\");
const router = useRouter();
const handleSubmit = async (e) => {
await e.preventDefault();
await router.push({ pathname: \"/search\", query: { query } });
};
...
}
The handleSubmit() takes the query from the user and uses router.push method to send that query state as query object to /search route.
The next step is to create the /search route or search.js file. We will first create Search.module.css to style this page.
Run the following command to create Search.module.css.
cd styles
touch Search.module.css
Add the following CSS to Search.module.css.
.container {
min-height: 100vh;
padding: 0 1.5rem;
display: flex;
flex-direction: column;
background-color: white;
}
.query {
font-size: 1.2rem;
font-weight: 700;
color: teal;
padding: 1rem;
width: fit-content;
border: 1px solid #1abc9c;
border-radius: 30px;
}
.home {
background-color: #1abc9c;
font-size: 1.5rem;
color: white;
text-align: center;
padding: 5px 7.5px;
margin: 5px;
cursor: pointer;
border-radius: 20px;
width: fit-content;
}
.home:hover,
.home:active,
.home:focus {
background-color: teal;
}
@media only screen and (max-width: 500px) {
.home {
font-size: 1.2rem;
}
.query {
font-size: 1rem;
}
}
Run the following command in your root directory to create search.js.
cd pages
touch search.js
Add the following code inside search.js.
// pages/search.js
import { searchPosts } from '../lib/api';
import Head from 'next/head';
import styles from '../styles/Search.module.css';
import Link from 'next/link';
import Header from '../components/header';
import PostContainer from '../components/post-container';
export default function Search({ post, searchedQuery }) {
return (
<div className={styles.container}>
<Head>
<title>{searchedQuery}</title>
</Head>
<Header title=\"NextJS Blog\" />
<h2 className={styles.home}>
<Link href={`/`}>🏠 Home</Link>
</h2>
{searchedQuery && <div className={styles.query}>Searched Query: {searchedQuery}</div>}
{post.length > 0 ? (
<div className={styles.posts}>
{post.map((post) => (
<PostContainer
post={post}
key={post._id}
title={post.title}
slug={post.slug}
deck={post.deck}
author={post.author}
tags={post.tags}
date={post._createdAt}
/>
))}
</div>
) : (
<h1>No Results</h1>
)}
</div>
);
}
export async function getServerSideProps({ query }) {
const post = await searchPosts(query.query);
return {
props: {
post,
searchedQuery: query.query
}
};
}
In the above code, we show posts only when post.length > 0, i.e., the searched query exists and there is a response from the GraphQL API.
If the searched query doesn't exist, we show the No Results message to the user.
You can access the query sent by the router.push() method by passing a query argument to the getServerSideProps() function.
It may be a little confusing to use query.query.
Here's an explanation for this, the first query is the argument passed in getServerSideProps() that can be used to access all the queries, while the second query is the user input or query sent by the router.push() method.
router.push({ pathname: \"/search\", query: { query } })
If you have another query named id, you can use query.id to access it.
Here's a GIF to show search functionality in action.
\n![\"A](\"https://pr5203.dev.takeshape.io/docs/assets/images/nextjs-blog-part-2-search-how-to-build-a-blog-part-2-001d3cbb418876f5ffd191884a37e44d.gif\")
\nSitemaps are a fundamental component of most websites and essential if your site needs to be indexed by a search engine.
\nCreate a function named getDataForSitemap() in lib/api.js. This function fetches the slug or -id and _updatedAt , i.e., the last updated date of posts, authors and tags.
// get data for sitemap
export async function getDataForSitemap() {
const data = await fetchData(`
query Sitemap {
getAuthorList {
total
items {
_updatedAt
slug
}
}
getPostList {
total
items {
_updatedAt
slug
}
}
getTagsList {
total
items {
_id
_updatedAt
}
}
}
`);
return data;
}
Run the following command to create sitemap.xml.js under pages directory.
cd pages
touch sitemap.xml.js
Add the following code to sitemap.xml.js.
//pages/sitemap.xml.js
import { getDataForSitemap } from '../lib/api';
const createSitemap = (data, origin) => {
return `<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<urlset xmlns=\"http://www.sitemaps.org/schemas/sitemap/0.9\"
xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\"
xsi:schemaLocation=\"http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd\">
${data.getAuthorList.items
.map((author) => {
return `
<url>
<loc>${`${origin}/author/${author.slug}`}</loc>
<lastmod>${author._updatedAt}</lastmod>
</url>
`;
})
.join('')}
${data.getPostList.items
.map((post) => {
return `
<url>
<loc>${`${origin}/blog/${post.slug}`}</loc>
<lastmod>${post._updatedAt}</lastmod>
</url>
`;
})
.join('')}
${data.getTagsList.items
.map((tag) => {
return `
<url>
<loc>${`${origin}/tag/${tag._id}`}</loc>
<lastmod>${tag._updatedAt}</lastmod>
</url>
`;
})
.join('')}
</urlset>
`;
};
export async function getServerSideProps({ res }) {
const data = await getDataForSitemap();
res.setHeader('Content-Type', 'text/xml');
res.write(createSitemap(data, 'http://localhost:3000'));
res.end();
return {
props: {}
};
}
const SitemapIndex = () => null;
export default SitemapIndex;
Head over to http://localhost:3000/sitemap.xml; here is how this page would look.
\n![\"Screenshot](\"/docs/assets/ideal-img/nextjs-blog-part-2-rss-feed-how-to-build-a-blog-part-2.de02864.320.png\")
When deploying, you should change the origin in the createSitemap() function inside the getServerSideProps() function to your domain or deployed URL.
res.write(createSitemap(data, \"https://takeshape-next-blog-2.vercel.app\"))
You can visit https://takeshape-next-blog-2.vercel.app/sitemap.xml to see the sitemap for this project.
\nThe last step is to create a robots.txt file under the public directory.
Run the following command to create robots.txt.
cd public
touch robots.txt
Add the following text to the robots.txt file.
User-agent: *
Sitemap: https://takeshape-next-blog-2.vercel.app/sitemap.xml
In this article, we discussed how to add multiple features and functionalities to a blog site made with Next.js. You can follow this tutorial and create your own version of this project. There are many features and functionality that you can add to this project.
\nHere are a few ideas to get you started:
\nHere are some additional resources that can be helpful.
\n\nHappy coding!
", "url": "https://pr5203.dev.takeshape.io/docs/guides/how-to-build-a-blog-with-nextjs-part-2", "title": "How to build a blog with NextJS | Part II", "summary": "Most of the time, tutorials come to an end when things become interesting, well not this time; in this tutorial, we will take the blog project created in the last post to the next level.", "date_modified": "2020-11-30T00:00:00.000Z", "author": { "name": "Ashutosh K Singh" }, "tags": [ "graphql", "nextjs", "blog", "ssg" ] }, { "id": "https://pr5203.dev.takeshape.io/docs/guides/how-to-build-a-blog-with-nextjs", "content_html": "\n\nIn this tutorial, we will learn how to build a simple blog with Next.js using a GraphQL content API.
\n
You can check out the final project here and the complete code on GitHub.
\nThis tutorial will use Create Next App to set up the initial Next app quickly.
\nIn your project's root directory, run the following commands in the command prompt.
\nnpx create-next-app next-blog
# or
yarn create next-app next-blog
Start the development server by running the following command.
\ncd next-blog
npm run dev
The last command will start the development server on your system's port 3000. Head over to http://localhost:3000 in your browser.
\nThe next step is to clean the sample code that is generated by create-next-app
\nhtml {
box-sizing: border-box;
font-size: 16px;
font-family:
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Oxygen,
Ubuntu,
Cantarell,
Fira Sans,
Droid Sans,
Helvetica Neue,
sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
margin: 0;
padding: 0;
font-weight: normal;
}
a {
color: inherit;
text-decoration: none;
}
pages/index.js like this.// pages/index.js
import Head from 'next/head';
import styles from '../styles/Home.module.css';
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>NextJS Blog</title>
</Head>
</div>
);
}
styles/Home.module.css like this./* styles/Home.module.css */
.container {
min-height: 100vh;
padding: 0 1.5rem;
display: flex;
flex-direction: column;
background-color: white;
}
Again head over to http://localhost:3000; it will be blank now.
\nNote: Throughout the tutorial, we will use CSS modules to style our app.
\nhttps://app.takeshape.io/signup for a developer account.
\nTo connect to your project, you need your API Endpoint and an API key.
\nIf you haven't created a project yet, follow this guide to do so.
\nIf you already have a project, your API Endpoint will be in the admin UI. In the home tab, look for the \"Useful Snippets\" section.
\nCopy the API Endpoint and save it somewhere secure.
\nTo get an API Key, you'll have to create one. Read our docs on creating an API Key here.
\nNext.js comes with built-in support for environment variables, so you don't have to install any separate package for it.
\nRun the following commands to create a .env file that will store your project's API keys.
\ntouch .env
In your .env file, add the environment variables.
\n# .env
GRAPHQL_API_KEY=\"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"
GRAPHQL_PROJECT=\"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"
Create a new folder named components in your project's root directory to store different components.
\nmkdir components
cd components
touch header.js
In your header.js file, add the following code.
\n// components/header.js
import styles from '../styles/Header.module.css';
export default function Header({ title }) {
return <h2 className={styles.heading}>{title}</h2>;
}
Create a new file named Header.module.css in the styles folder.
cd styles
touch Header.module.css
Add the following CSS to Header.module.css.
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
.heading {
margin-bottom: 20px;
line-height: 1.15;
font-size: 3.5rem;
font-family: Montserrat;
cursor: pointer;
width: fit-content;
}
.heading:hover,
.heading:focus,
.heading:active {
color: #1abc9c;
}
@media only screen and (max-width: 500px) {
.heading {
font-size: 2.5rem;
}
}
Import and use this Header component in your index.js file.
// pages/index.js
import Head from 'next/head';
import styles from '../styles/Home.module.css';
import Header from '../components/header';
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>NextJS Blog</title>
</Head>
<Header title=\"NextJS Blog\" />
</div>
);
}
With your development server still running, navigate to http://localhost:3000 in your browser. Here is how your app will look.
\n![\"A](\"/docs/assets/ideal-img/nextjs-blog-empty-how-to-build-a-blog.73b72c0.320.png\"){kind=spacer}
In this section, we will define the functions that will fetch data from the GraphQL API.
\nCreate a new file named api.js under the lib directory.
\nmkdir lib
cd lib
touch api.js
Add the following code for a function that will fetch data from the GraphQL API to api.js . This modified fetch() function will remove the same code's repetition for different GraphQL queries.
//lib/api.js
const API_ENDPOINT = `https://___apiDomain___/project/${process.env.GRAPHQL_PROJECT}/graphql`;
const GRAPHQL_API_KEY = process.env.GRAPHQL_API_KEY;
const fetchData = async (query, { variables } = {}) => {
const res = await fetch(API_ENDPOINT, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${GRAPHQL_API_KEY}`
},
body: JSON.stringify({
query,
variables
})
});
const responseJson = await res.json();
if (responseJson.errors) {
console.error('Something went Wrong. Failed to fetch API!!' + responseJson.errors);
}
return responseJson.data;
};
fetchData() is a function that receives GraphQL query and variables(if any) as parameters and fetch data from the GraphQL API based on that query.
For example, consider a GraphQL query to get the name of all authors.
\nquery MyQuery {
getAuthorList {
items {
name
}
}
}
You can head over to API Explorer to explore and create different queries based on your needs. The Explorer is simple, straightforward, and fun to use.
\nHere is how this query will look when executed.
\n![\"A](\"/docs/assets/ideal-img/api-explorer-how-to-build-a-blog.a884838.320.png\")
Here is the same query is passed in the fetchData().
export const getAllAuthors = async () => {
const data = await fetchData(`
{
allAuthors: getAuthorList {
items {
name
}
}
}`);
return data;
};
// data
{
allAuthors: items: [
{
name: 'C.S. Lewis'
},
{
name: 'J. M. Barrie'
},
{
name: 'Robert Louis Stevenson'
},
{
name: 'Lewis Carroll'
}
];
}
For this demo blog, we will define three GraphQL queries.
\ngetAllPosts: get all posts to display on the landing pagegetPostBySlug : get a single post based on the slug passedgetAllSlugs : get all slugs of the posts to generate static pathsIn your lib/api.js add the following code.
// lib/api.js
const API_ENDPOINT = `https://___apiDomain___/project/${process.env.GRAPHQL_PROJECT}/graphql`;
const GRAPHQL_API_KEY = process.env.GRAPHQL_API_KEY;
const fetchData = async (query, { variables } = {}) => {
const res = await fetch(API_ENDPOINT, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${GRAPHQL_API_KEY}`
},
body: JSON.stringify({
query,
variables
})
});
const responseJson = await res.json();
if (responseJson.errors) {
console.error('Something went Wrong. Failed to fetch API!!' + responseJson.errors);
}
return responseJson.data;
};
// get all posts to display on landing page
export async function getAllPosts() {
const data = await fetchData(
`
query AllPosts {
allPosts: getPostList {
items {
_id
title
deck
slug
author {
name
}
}
}
}
`
);
return data.allPosts.items;
}
// get all slugs of the posts to generate static paths
export async function getAllSlugs() {
const data = await fetchData(`
{
allPosts: getPostList {
items {
slug
}
}
}
`);
return data.allPosts.items;
}
// get single post based on the slug passed
export async function getPostBySlug(slug) {
const data = await fetchData(
`
query PostBySlug($slug: String) {
post: getPostList(where: {slug: {eq: $slug}}) {
items {
_id
title
slug
deck
bodyHtml
author{
name
}
}
}
}`,
{
variables: {
slug
}
}
);
return data.post.items[0];
}
In getPostBySlug() function, the slug is passed as a parameter, and using it the corresponding post is returned. You can easily create queries like this using the Explorer tab in the API Explorer menu on your dashboard.
We will now create a container component to pass the post data as props and display them on our home page.
\nThis image shows the container component.
\n![\"A](\"/docs/assets/ideal-img/empty-component-how-to-build-a-blog.7f4da5c.320.png\"){kind=spacer}
Create a new file named post-container.js under the components directory. In your project's root directory, run the following command.
cd components
touch post-container.js
Add the following code to the post-containter.js file.
// components/post-container.js
import Link from 'next/link';
import styles from '../styles/PostContainer.module.css';
export default function PostContainer({ title, deck, slug, author }) {
return (
<div className={styles.container}>
<div className={styles.title}>
<Link href={`/blog/${slug}`}>{title}</Link>{' '}
</div>
<div className={styles.author}> {author.name}</div>
<div className={styles.deck}>
<p>{deck}</p>
</div>
<div className={styles.read}>
<Link href={`/blog/${slug}`}>Read More</Link>
</div>
</div>
);
}
You are more than welcome to add more data to this container component like featureImage, tags, etc.
To style this component, create a new file named PostContainer.module.css under styles directory. Run the following commands in your project's root directory.
cd styles
touch PostContainer.module.css
Add the following code to PostContainer.module.css file.
/* styles/PostContainer.module.css */
@import url('https://fonts.googleapis.com/css2?family=Syne+Mono');
.container {
margin: 1rem;
flex-basis: 55%;
padding: 1.25rem;
text-align: left;
text-decoration: none;
border: 1px solid #bdc3c7;
border-radius: 10px;
background-color: white;
transition:
color 0.15s ease,
border-color 0.15s ease;
}
.container:hover,
.container:focus,
.container:active {
border-color: #1abc9c;
box-shadow: 2px 2px 1px #1abc9c;
}
.container p {
margin: 0;
font-size: 1.25rem;
line-height: 1.5;
}
.title {
color: teal;
text-decoration: none;
margin: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 2rem;
}
.title a:hover,
.title a:focus,
.title a:active {
color: #1abc9c;
text-decoration: underline;
}
.author {
color: inherit;
font-family: 'Syne Mono', monospace;
font-style: italic;
font-size: 1rem;
padding: 5px 10px;
display: inline-block;
margin: 0 2px;
}
.deck {
margin: 5px 0;
}
.deck p {
font-size: 1.15rem;
line-height: 1.5rem;
margin: 2px 0;
}
.read {
background-color: teal;
font-size: 1rem;
color: whitesmoke;
padding: 10px 15px;
text-align: center;
display: inline-block;
margin-top: 5px;
cursor: pointer;
border-radius: 50px;
}
.read:hover,
.read:focus,
.read:active {
color: white;
background-color: #1abc9c;
}
@media only screen and (max-width: 500px) {
.title {
font-size: 1.5rem;
}
.deck p {
font-size: 1rem;
}
.author {
font-size: 0.8rem;
}
.container {
margin: 0.5rem 0.35rem;
padding: 1rem;
}
}
Before we use the PostContainer component in the index.js file, we need to fetch the data to pass into the component.
We will create and export an asynchronous function getStaticProps() to fetch data at build time. If you are not familiar with getStaticProps(), you can read more about how it's used here.
One of the use cases of getStaticProps() is to fetch data from a remote API, which is exactly what we are doing.
\nUpdate your pages/index.js file like this.
// pages/index.js
import Head from 'next/head';
import styles from '../styles/Home.module.css';
import Header from '../components/header';
import PostContainer from '../components/post-container';
import { getAllPosts } from '../lib/api';
export default function Home({ posts }) {
return (
<div className={styles.container}>
<Head>
<title>NextJS Blog</title>
</Head>
<Header title=\"NextJS Blog\" />
{posts.map((post) => (
<PostContainer key={post._id} title={post.title} slug={post.slug} author={post.author} deck={post.deck} />
))}
</div>
);
}
export async function getStaticProps() {
const posts = await getAllPosts();
return {
props: {
posts
}
};
}
Head over to http://localhost:3000. Here is how your app will look.
\n![\"A](\"/docs/assets/ideal-img/nextjs-blog-homepage-how-to-build-a-blog.a2b988c.320.png\")
Your Home Page is now complete. You will notice the links do not work yet, but we'll fix that by creating routes for the posts.
\nCreating dynamic routes is easy in Next.js, you can add brackets to a page name ([param]) to create a dynamic routes.
Create a new file named [slug].js under the blog directory in the pages folder. In your project's root directory, run the following commands.
cd pages
mkdir blog
cd blog
touch [slug].js
Add the following code to [slug].js
// pages/blog/[slug].js
import Head from 'next/head';
import Link from 'next/link';
import styles from '..//../styles/Posts.module.css';
import { getAllSlugs, getPostBySlug } from '../../lib/api';
import Header from '../../components/header';
function Posts({ post }) {
return (
<div>
<Head>
<title key={post.title}>{post.title}</title>
</Head>
<div className={styles.container}>
<div className={styles.header}>
<Header title={post.title} />
<h2 className={styles.home}>
<Link href={`/`}>🏠 Home</Link>
</h2>
</div>
<div className={styles.info}>By: {post.author.name}</div>
<div className={styles.body}>
{' '}
<main dangerouslySetInnerHTML={{ __html: post.bodyHtml }} />
</div>
</div>
</div>
);
}
export async function getStaticPaths() {
const allPosts = await getAllSlugs();
const paths = allPosts.map((post) => ({
params: { slug: post.slug }
}));
return {
paths,
fallback: false
};
}
export async function getStaticProps({ params }) {
const post = await getPostBySlug(params.slug);
return {
props: {
post
}
};
}
export default Posts;
You will notice in the above code, we have used an asynchronous function getStaticPaths() in which we fetch slugs of all the posts, getStaticPaths() will use these slugs to generate paths for all the posts in your app. You can read more about getStaticPaths() here.
The same slugs are passed to getStaticProps() and then to the getPostBySlug() function to retrieve a single post corresponding to that slug.
To style [slug].js, create a new file named Posts.module.js under styles directory.
cd styles
touch Posts.module.css
Add the following CSS to Posts.module.css file.
/* Posts.module.css */
@import url('https://fonts.googleapis.com/css2?family=Syne+Mono');
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: #fafafa;
}
.home {
background-color: #1abc9c;
font-size: 1.5rem;
color: white;
text-align: center;
display: inline;
padding: 5px 7.5px;
margin: 5px;
cursor: pointer;
border-radius: 20px;
}
.home:hover,
.home:active,
.home:focus {
background-color: teal;
}
.header {
padding: 0.5rem 1.5rem;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
background-color: white;
}
.info {
font-size: 1.5rem;
padding: 1rem 2rem;
margin: 5px;
font-weight: bold;
font-family: 'Syne Mono', monospace;
}
.body {
margin: 10px 70px;
font-size: 1.25rem;
}
.body img,
.body iframe {
max-width: 100%;
height: auto;
}
.body figcaption {
font-size: 1rem;
font-weight: 100;
}
@media only screen and (max-width: 500px) {
.header {
display: inline;
}
.home {
font-size: 1.2rem;
}
.body {
margin: 10px 30px;
font-size: 1rem;
}
.body figcaption {
font-size: 0.8rem;
}
}
And we're done!
\nHead over to http://localhost:3000 and click on any of the posts. Here is how your blog page will look.
\n![\"A](\"/docs/assets/ideal-img/nextjs-blog-post-how-to-build-a-blog.fabe685.320.png\")
You can view the finished website here and the code for the project here.
\nIn this article, we discussed how to create a blog site using Next.js. You can follow this tutorial and create your own version of this project. There are many features and functionality that you can add to this project.
\nHere are a few ideas to get you started:
\nHere are some additional resources that can be helpful.
\n\nHappy coding!
", "url": "https://pr5203.dev.takeshape.io/docs/guides/how-to-build-a-blog-with-nextjs", "title": "How to build a blog with NextJS", "summary": "In this tutorial, we will learn how to build a simple blog with Next.js using a GraphQL content API.", "date_modified": "2020-11-12T00:00:00.000Z", "author": { "name": "Ashutosh K Singh" }, "tags": [ "graphql", "nextjs", "blog", "ssg" ] }, { "id": "https://pr5203.dev.takeshape.io/docs/guides/how-to-use-tailwind-css/", "content_html": "\n\nIn this tutorial we're going to build a job board site using Tailwind CSS, and Next.js.
\n
![\"Job](\"/docs/assets/ideal-img/jobboard-home-how-to-use-tailwind-css.d14a654.320.png\")
![\"Job](\"/docs/assets/ideal-img/jobboard-listing-how-to-use-tailwind-css.6ab73d6.320.png\")
![\"Contact](\"/docs/assets/ideal-img/jobboard-individual-how-to-use-tailwind-css.c879afd.320.png\")
You can view the finished project here and the Github repo here.
\nTailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It's a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build without any opinionated styles.
\nTraditionally, whenever you need to style something on the web, you write CSS.
\n<h1 class=\"title\">Regular CSS</h1>
.title {
color: red;
}
With Tailwind, you style elements by applying pre-existing classes directly in your HTML.
\n<h1 class=\"text-red-500\">Tailwind</h1>
You might be thinking, this is quite ugly and feels like an atrocity. But there are several good reasons for why you want to use this over regular CSS.
\nSign up for a developer account.
\n![\"App](\"/docs/assets/ideal-img/signup-how-to-use-tailwind-css.4617c6b.320.png\")
Under Pattern, select Shape Job Board and go ahead and give it a cool name. I'll call mine something generic like Tailwind-CSS-Job-Board.
\nTo connect to your project, you need your API Endpoint and an API key.
\nIf you haven't created a project yet, follow this guide to do so.
\nIf you already have a project, your API Endpoint will be in the admin UI. In the home tab, look for the \"Useful Snippets\" section.
\nCopy the API Endpoint and save it somewhere secure.
\nTo get an API Key, you'll have to create one. Read our docs on creating an API Key here.
\nFirst, set up a Next.js project. To do that, we're going to use Next's create-next-app. Open a terminal and run the following command:
npx create-next-app
# or
yarn create next-app
Next, run npm run dev and head to localhost:3000 to ensure everything works.
Now, we need to install Tailwind as a CSS dev dependency.
\nnpm install tailwindcss postcss-preset-env -D
# or
yarn add tailwindcss postcss-preset-env -D
Next we need to create the Tailwind configuration file. In your terminal, run the following command:
\nnpx tailwindcss init
In the tailwind.config.js file, add all the React component files in the purge property. For this we will add all the files in the pages and components folders.
module.exports = {
purge: ['./pages/**/*.js', './src/components/**/*.js'],
theme: {
extend: {}
},
variants: {},
plugins: []
};
Next, we need to create the root CSS file where we will import Tailwind CSS. In the styles folder, create a file called index.css.
@tailwind base;
@tailwind components;
@tailwind utilities;
After that we need to import the CSS to our application. In Next.js we have to do this in the _app.js file, which is created in the pages directory.
import '../src/styles/index.css';
const MyApp = ({ Component, pageProps }) => {
return <Component {...pageProps} />;
};
export default MyApp;
Next, we need to set up PostCSS to include Tailwind CSS. In the project root, create a postcss.config.js file.
module.exports = {
plugins: ['tailwindcss', 'postcss-preset-env']
};
Finally, we need to update the Tailwind configuration to look through all of our project files for Tailwind classes.
\nIn your tailwind.config.jsfile, add the following:
module.exports = {
future: {
removeDeprecatedGapUtilities: true
},
purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
'accent-1': '#333'
}
}
},
variants: {},
plugins: []
};
Now, let's test this out. In pages/index.js, add the following:
import Head from 'next/head';
function Home() {
return (
<div>
<Head>
<title>Tailwind CSS </title>
<link rel=\"icon\" href=\"/favicon.ico\" />
</Head>
<section>
<h1 className=\"text-indigo-600 p-4 text-xl\">Hello World!</h1>
</section>
</div>
);
}
export default Home;
This should apply an indigo color to our text \"Hello World\" and if we save it, you should see it reflect in the browser. See the full list of text colors here.
To get a feel for Tailwind, let's build something small and break it down. For this, we're going to build a button.
\nHere's the markup for this button:
\n<button class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\">Button</button>
And here's the corresponding css for each of the class names.
\nbg-blue-500 - background-color: #4299e1;hover:bg-blue-700 - On hover, background-color: #2b6cb0;text-white - color: #FFF;font-bold - font-weight: bold;py-2 - padding-top: 1rem; padding-bottom: 1rem;px-4 - padding-left: 1rem; padding-right: 1rem;rounded - border-radius: 0.25rem;Now that we know a little bit more about Tailwind, let's go and build the landing page.
\nNow, we need to create the landing page. First, we're importing the navbar from the components folder which you'll build in the next section. Then, we're creating a container to put our heading, sub-heading, button, and svg illustration. Lastly, we're using various Tailwind classes to customize the font, width, height, etc.. in combination with Flexbox to make it responsive.
\nInside the pages directory, in the index.js file, add the following:
import Head from 'next/head';
import Link from 'next/link';
import Navbar from '../components/Navbar';
import LandingIllustration from '../assets/project-team.svg';
function Home() {
return (
<div>
<Head>
<title>Tailwind CSS </title>
<link rel=\"icon\" href=\"/favicon.ico\" />
</Head>
<section>
<main className=\"bg-white font-montserrat\">
<Navbar />
<div className=\"container mx-auto flex flex-col-reverse sm:flex-row items-center\">
<div className=\"sm:w-2/5 flex flex-col items-start mt-8 sm:mt-0\">
<h1 className=\"text-4xl lg:text-6xl leading-none mb-4\">
Find a <strong className=\"font-black\">great</strong> job near you
</h1>
<p className=\"lg:text-lg mb-4 sm:mb-12\">
Find your dream job today. View our job board for all available listings.
</p>
<Link href=\"/job-board\">
<button className=\"font-semibold text-lg bg-green-400 hover:bg-green-500 text-white py-3 px-10 rounded\">
View
</button>
</Link>
</div>
<div className=\"sm:w-1/5 mb-10\">
<div className=\"m-5\">
<LandingIllustration />
</div>
</div>
</div>
</main>
</section>
</div>
);
}
export default Home;
In this section, we're going to build out the Navbar. Since we're going to need to use the navbar in multiple pages, we should make it into a component. Utilizing Tailwind's classes, we're using Flexbox to act as the container and to arrange items. Then, we're using various Tailwind classes to customize the color, font-family, width, height, and more of the items in the navbar. Lastly, we're using Next's Link component to link to other pages like the index page and the job board page.
At the root of your project, create a folder called components and a file called Navbar.js. Add the following:
import Link from 'next/link';
const Navbar = () => {
return (
<section>
<header className=\"h-24 sm:h-32 flex items-center\">
<div className=\"container mx-auto px-6 sm:px-12 flex items-center justify-between\">
<div className=\"text-black font-black text-2xl flex items-center\">
<span className=\"w-6 h-6 rounded-full bg-green-400 mr-4\"></span>
<Link href=\"/\">Métier</Link>
</div>
<div className=\"flex items-center\">
<nav className=\"text-black text-lg hidden lg:flex items-center\">
<Link href=\"/\">
<a className=\"py-2 px-6 flex hover:text-green-400\">Home</a>
</Link>
<Link href=\"/job-board\">
<a href=\"#\" className=\"py-2 px-6 flex hover:text-green-400\">
Job Board
</a>
</Link>
</nav>
</div>
</div>
</header>
</section>
);
};
export default Navbar;
If we click on the View button, we're supposed to be taken to the job-board page, so, let's create that page. In your pages folder, create a file called job-board.js and add the following:
import Navbar from '../components/Navbar';
const JobBoard = () => {
return (
<section>
<Navbar />
<h1>JobBoard</h1>
</section>
);
};
export default JobBoard;
Now we need some data to populate our job-board page. For this, we're going to use Apollo Client to fetch our data and supply it to our Next.js application.
First, we need to install some dependencies. In your terminal, install the following:
\nnpm i @apollo/react-hooks apollo-boost graphql next-with-apollo
# or
yarn add @apollo/react-hooks apollo-boost graphql next-with-apollo
At the root of your project, create a folder called lib and create a file called withApollo.js and add the following:
In the withApollo.js file, we're creating a High Order Component to create a basic setup with Apollo Boost to use Apollo with Next.js. Then, we're wrapping the whole app with the ApolloProvider component which will allow us to make requests to the GraphQL API from any page or component.
import withApollo from 'next-with-apollo';
import ApolloClient, { InMemoryCache } from 'apollo-boost';
import { ApolloProvider } from '@apollo/react-hooks';
export default withApollo(
({ initialState }) => {
return new ApolloClient({
uri: `https://___apiDomain___/project/${process.env.GRAPHQL_ID}/graphql`,
cache: new InMemoryCache().restore(initialState || {}),
headers: {
authorization: `Bearer ${process.env.GRAPHQL_KEY}`
}
});
},
{
render: ({ Page, props }) => {
return (
<ApolloProvider client={props.apollo}>
<Page {...props} />
</ApolloProvider>
);
}
}
);
Next.js comes with built-in support for environment variables, so we don't need to install a third party library for this.
To use environment variables in Next.js, we're going to create a file called .env.local which will load all the variables into process.env. In addition, since we're making a GET request in the browser, .env.local will only load the environment variables in a Node.js environment. In order to expose a variable to the browser you have to prefix the variable with NEXT_PUBLIC_
At the root of your project, create a file called .env.local and add the following:
NEXT_PUBLIC_PROJECT_ID=\"<YOUR PROJECT ID>\"
NEXT_PUBLIC_PROJECT_KEY=\"<YOUR PROJECT API KEY>\"
Now, we need to wrap our whole app so we can fetch all the jobs in our job-board.js file. To do that, head into the pages folder and in the _app.js file add the following:
import '../styles/index.css';
import withApollo from '../lib/withApollo';
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default withApollo(MyApp);
Go back to the pages/job-board.js and update it so we can fetch jobs from the GraphQL API. Add the following:
import gql from 'graphql-tag';
import { useQuery } from '@apollo/react-hooks';
import Navbar from '../components/Navbar';
const QUERY = gql`
{
getJobList {
items {
_id
title
body
hotJob
company {
name
}
}
}
}
`;
const JobBoard = () => {
const { loading, data } = useQuery(QUERY);
if (!loading) {
console.log(data);
}
return (
<div>
<Navbar />
</div>
);
};
export default JobBoard;
If you open your console in the browser, you should see the data. Now, let's build a card component to display the title, description, etc...
\nIn your components folder, create a new file called Card.js and add the following:
const Card = ({ allJobs }) => {
const { items } = allJobs.getJobList;
return (
<section className=\"grid grid-cols-3\">
{items.map((job) => {
return (
<div className=\"max-w-sm rounded overflow-hidden shadow-lg m-10\" key={job._id}>
<img
className=\"w-full\"
src=\"https://9to5mac.com/wp-content/uploads/sites/6/2018/02/logo.jpg?quality=82&strip=all\"
alt=\"Sunset in the mountains\"
/>
<div className=\"px-6 py-4\">
<div className=\"font-bold text-xl mb-2\">{job.company.name}</div>
<p className=\"text-gray-700 text-base\">{job.body.blocks[0].text}...</p>
</div>
<div className=\"px-6 pt-4 pb-2\">
<span className=\"inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2\">
{job.title}
</span>
<span className=\"inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2\">
#money
</span>
<span className=\"inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2\">
#location
</span>
</div>
</div>
);
})}
</section>
);
};
export default Card;
Now go back to the job-board.js file and update it so we can pass the data into the Card component as a prop.
import gql from 'graphql-tag';
import { useQuery } from '@apollo/react-hooks';
import Navbar from '../components/Navbar';
import Card from '../components/Card';
const QUERY = gql`
{
getJobList {
items {
_id
title
body
hotJob
company {
name
}
}
}
}
`;
const JobBoard = () => {
const { loading, data } = useQuery(QUERY);
return (
<div>
<Navbar />
{loading ? <h1>Loading...</h1> : <Card allJobs={data} />}
</div>
);
};
export default JobBoard;
In the next section, we're going to learn more about dynamic routes in Next.js. In our Card component, we want to be to click on a specific job listing and be taken to that job page. For this, we need to be able to create a dynamic slug (localhost:3000/1234) and a template to display what every dynamic page should look like.
Defining routes by using predefined paths can be tedious and is not always enough for complex applications. In Next.js you can add brackets to a page ([id]) to create a dynamic route (a.k.a. url slugs, pretty urls, and others).
\nEvery time we click on the apply button in the Card.js file, we want to be taken to the apply page. For this, we need dynamic routes, which will create a new page based on the dynamic data we pass in to Next's router.
To create a dynamic route, first, we need to import the Link component from Next. Then, we need to wrap the Link component around the item that we want to be able to click on. In this case, we would wrap it around the Apply button. The Link component has a couple of props that we can use:
\nlocalhost:3000/post/<id>. To achieve that, you would put this: <Link href=\"/post/[id]\"/>. For this project, we want the route to look something like this: localhost:3000/<id>.In your Card.js file add the following:
import Link from 'next/link';
const Card = ({ allJobs }) => {
const { items } = allJobs.getJobList;
return (
<section className=\"grid grid-cols-3\">
{items.map((job) => {
return (
<div className=\"max-w-sm rounded overflow-hidden shadow-lg m-10\" key={job._id}>
<div className=\"px-6 py-4\">
<div className=\"font-bold text-xl mb-2\">{job.company.name}</div>
<p className=\"text-gray-700 text-base\">{job.body.blocks[0].text}...</p>
</div>
<div className=\"px-6 pt-4 pb-2\">
<Link href={{ pathname: '/[id]', query: { title: job.title } }} as={`/${job._id}`}>
<button className=\"bg-green-400 hover:bg-green-500 text-white font-bold py-2 px-4 rounded m-4\">
Apply
</button>
</Link>
{/* <Link href='/[id]' as={`/${job._id}`}>
<button className='bg-green-400 hover:bg-green-500 text-white font-bold py-2 px-4 rounded m-4'>
Apply
</button>
</Link> */}
<span className=\"inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2\">
{job.title}
</span>
</div>
</div>
);
})}
</section>
);
};
export default Card;
Next, let's create the [id].js file which will serve as a template for our dynamic routes. To do that, head into your pages folder and create a file called [id].js and add the following:
import Navbar from '../components/Navbar';
import { useRouter } from 'next/router';
const Apply = () => {
const router = useRouter();
return (
<section>
<Navbar />
<div className=\"grid place-items-center p-10\">
<h1 className=\"mb-16 text-4xl text-green-400\">{router.query.title}</h1>
<form className=\"w-full max-w-lg\">
<div className=\"flex flex-wrap -mx-3 mb-6\">
<div className=\"w-full px-3\">
<label
className=\"block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2\"
htmlFor=\"grid-password\"
>
Full Name
</label>
<input
className=\"appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500\"
id=\"nick\"
type=\"text\"
/>
</div>
</div>
<div className=\"flex flex-wrap -mx-3 mb-6\">
<div className=\"w-full px-3\">
<label
className=\"block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2\"
htmlFor=\"grid-password\"
>
Email
</label>
<input
className=\"appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500\"
id=\"email\"
type=\"email\"
/>
</div>
</div>
<div className=\"flex flex-wrap -mx-3 mb-6\">
<div className=\"w-full px-3\">
<label
className=\"block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2\"
htmlFor=\"grid-password\"
>
Cover Letter
</label>
<textarea
className=\" no-resize appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500 h-48 resize-none\"
id=\"message\"
></textarea>
</div>
</div>
<div className=\"md:flex md:items-center\">
<div className=\"md:w-1/3\">
<button
className=\"shadow bg-green-400 hover:bg-green-500 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded\"
type=\"button\"
>
Apply
</button>
</div>
<div className=\"md:w-2/3\"></div>
</div>
</form>
</div>
</section>
);
};
export default Apply;
What this does is say I want to use the [id].js file as a template for my dynamic page and I want my dynamic identifier to be the _id coming from GraphQL. Now every time we click on the Apply button in the job-board.js file it will take us to this dynamic page with our dynamic route that looks something like this: http://localhost:3000/<id>.
You can view the finished project here and Github repo here.
\nIn this tutorial, we learned about Tailwind CSS—a utility first CSS framework that gives you the freedom to use utility classes to build out custom designs requiring minimal custom CSS and provides a better developer experience. In addition, we learned how to integrate Tailwind and build out a job listing site with Next.js. Give Tailwind a try on your next project!
", "url": "https://pr5203.dev.takeshape.io/docs/guides/how-to-use-tailwind-css/", "title": "How to use Tailwind CSS", "summary": "In this tutorial we're going to build a job board site using Tailwind CSS, and Next.js.", "date_modified": "2020-10-01T00:00:00.000Z", "author": { "name": "Natalie Smith" }, "tags": [ "graphql", "tailwind", "ssg" ] }, { "id": "https://pr5203.dev.takeshape.io/docs/guides/weve-made-filtering-way-easier/", "content_html": "\n\nThe “where” parameter for GraphQL queries opens up a whole new word of possibilities for filtering. This is a huge improvement to how filtering works with the GraphQL API.
\n
![\"Code](\"https://pr5203.dev.takeshape.io/docs/assets/images/where-filter-demo-filtering-3b30d21d882f27d9cbac78f311ff5019.gif\")
\n# AND, OR, NOT
{
\"where\": {
\"OR\": [
{
\"title\": {
\"match\": \"engineer\"
}
},
{
\"NOT\": {
\"hotJob\": {
\"eq\": true
}
}
}
]
}
}
# eq, in, gt, gte, lt, lte, match, regexp
{
\"where\": {
\"book_image\": {
\"filename\": {
\"match\": \"my-file\"
}
},
\"post_image\": {
\"regexp\": \".*.png\"
}
}
}
# yyyy-mm-dd - ISO 8601
{
\"where\": {
\"title\": {
\"in\": [\"Front-End Developer\", \"Engineering Manager\"]
},
\"_createdAt\": {
\"gte\": \"now-1w\"
}
}
}
# Workflow
{
\"where\": {
\"_status\": {
\"gt\": \"draft\",
\"lt\": \"published\"
}
}
}
Check out the full documentation for more information. Log in and try out the new where filtering right in the API explorer.
", "url": "https://pr5203.dev.takeshape.io/docs/guides/weve-made-filtering-way-easier/", "title": "How to: Filtering", "summary": "The new \"where\" filter for GraphQL queries is a powerful way to filter content", "date_modified": "2020-06-25T00:00:00.000Z", "author": { "name": "Mark Catalano" }, "tags": [ "graphql", "filtering", "queries" ] } ] }