DEV Community: Imran Irshad

Authenticating full-stack Nextjs App

Imran Irshad — Tue, 24 Nov 2020 10:33:17 +0000

In The Previous blog we created a FullStack Nextjs with Typescript, Graphql. In this post we will learn how we add authentication to the app. You can read the post here.
You can get the code from this repo .

If You want to see the final code you can get it from here.

From Your terminal run this command

git clone https://github.com/imran-ib/full-stack-nextjs.git

cd into full-stack-nextjs and run npm install

After the installation is finished npm run dev and go to localhost:3000.

You should see something like this

and if you go to localhost:3000/api you can see our graphql api

Let's get started Now

in pages/api/index.ts file we have two models userand post and two resolvers mutations and query and schema

let's add these to their separate files. create three folders Models , Resolvers , Schema in pages/api directory

and add user and post to pages/api/Models

mutations and query to pages/api/Resolvers

schema to pages/api/Schema

and import these files to pages/api/index.ts

import models and resolvers to schema

import this file (schema.ts) to pages/api/index .

Note: Please don't forget to move all related imports to each file

Now You App Should working file as before.

our pages/api/index.ts file looks like this

import { ApolloServer } from "apollo-server-micro";
import { schema } from "./Schema";

export const config = {
  api: {
    bodyParser: false,
  },
};

export default new ApolloServer({ schema }).createHandler({
  path: "/api",
});

we need to change the way we are creating server

const server = new ApolloServer({ schema });

export default server.createHandler({
  path: "/api",
});

*Note : if you have any problem or getting any error while changing files to different directories you can get the code from running following command *

git clone -b file-structre https://github.com/imran-ib/auntenticating-next-app.git

after cloning the repo just install dependencies.

Context

context is an object or a function that creates an object. We pass this object to our server and server will passes this context to every resolver. In this way we can share information through out our app.

create a file named context.ts in pages/api

import { PrismaClient } from "@prisma/client";
import { Request, Response } from "express";
const prisma = new PrismaClient();

export interface Context {
  prisma: PrismaClient;
  req: Request;
  res: Response;
}

export const createContext = (ctx: any): Context => {
  return {
    ...ctx,
    prisma,
  };
};

Now Import createContext to our pages/api/index.ts and set it to Apollo server context

const server = new ApolloServer({
  schema,
  context: createContext,
});

So far so good

graphql-shield

graphql-shield is a sort of middleware that creates a permission layer for your application. we will add it to the schema as a middleware and it will allow us to check users permissions before resolving any function.

npm i graphql-shield

create new file pages/api/permissions/index.ts and paste following code

import { shield } from "graphql-shield";

const rules = {
  isAuthenticatedUser: {},
};

export const permissions = shield({
  Query: {},
  Mutation: {},
});

isAuthenticatedUser : we will set it to a Boolean so that if user is authenticated it will be true otherwise it will be false

in permissions we will add queries and mutations we want to protect

Now We will add this to schema but for that we need another package graphql-middleware

GraphQL Middleware lets you run arbitrary code before or after a resolver is invoked.

npm i graphql-middleware

now import permissions and applyMiddleware from the package we installed graphql middleware into pages/api/index.ts

import { ApolloServer } from "apollo-server-micro";
import { applyMiddleware } from "graphql-middleware";
import { schema } from "../../server/Schema";
import { createContext } from "./context";
import { permissions } from "./permissions";

export const config = {
  api: {
    bodyParser: false,
  },
};

const server = new ApolloServer({
  schema: applyMiddleware(schema, permissions), // <-- Changes
  context: createContext,
});

export default server.createHandler({
  path: "/api",
});

This is it. Graphql Shield is set up.

JWT

Now we need to identify users with the help of jsonwebtoken

npm i jsonwebtoken && npm i -D @types/jsonwebtoken

jesonwebtoken normally refers as simply jwt . jwt is base64url-encoded which can be easily decoded later. it is worth mentioning that we don't put valuable information in jwt because anyone can decode it and get information. We only put information like user id which is normally random digit or a long string. We need that to identify user but if someone gets that information it is ok for us.

When user will try to login and provides correct credentials we will generate a jwt for that user with user's id encoded in it and send it to client side. We then take that token on client side and store it in local storage. with every request we will send that token to our server.

let's go to our mutation.ts file and in this file we four mutations

signupUser , deletePost , createDraft, and publish

Let's create new mutation userLogin

 t.field("userLogin", {
      type: "String",
      args: {
        email: stringArg(),
        password: stringArg(),
      },
      description: "User Sign in",
      resolve: async (parent, args, ctx) => {
        try {
          const User = await prisma.user.findOne({
            where: {
              email: args.email,
            },
          });

          if (!User) return new Error(`Authorization failed`);
          const token = jwt.sign({ UserId: User.id }, "MyNewApp");
          return token;
        } catch (error) {
          console.log("definition -> error", error);
        }
      },
    });

NOTE: ideally you would want to hash the password when creating user and then compare that hash when you letting them in, but in this case I am skipping bcrypt

So What is happening in this resolver

we are creating new resolver userLogin
Return type is string (jwt)
takes two arguments email and password
we find user from database and if user not found then we will throw an error
if there is user then create a jwt token and return it

let's see this in action

First we need a user so let's create one

now Sign user in

Great We have token Now we will send this token in authorization header so that our app can decode it and find the user by id

at the bottom of above image you see Query Variables we can pass here http headers. Copy the token and pass it as following

{
  "Authorization":"Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJVc2VySWQiOjEsImlhdCI6MTYwNTk3NDgyNX0.kYDgyvB3C0LYiam7ixUDzkQIbCAl19Gyp83MiR9q_S8"
}

create a utils/decocdejwt.ts

import { verify } from "jsonwebtoken";

// export const APP_SECRET = process.env.APP_SECRET
export const APP_SECRET = "MyNewApp";

interface Token {
  UserId: string;   // <-- NOTE: capital "U"
}

export function getUserId(context) {
  const Authorization = context.req.headers["authorization"];
  if (Authorization) {
    const token = Authorization.replace("Bearer ", "");
    const verifiedToken = verify(token, APP_SECRET) as Token;
    const res = verifiedToken && verifiedToken.UserId;
    return res;
  }
}

getUserId function will take context and from that it will get Authorization header and decode the jwt and give us user's id

Now Let's go to api/permissions/index.ts and add new rule

import { rule, shield } from "graphql-shield";
import { PrismaClient } from "@prisma/client";
import { getUserId } from "../../../utils/decodejwt";
const prisma = new PrismaClient();

const rules = {
  isAuthenticatedUser: rule()(async (__parent, _args, context) => {
    const userId = parseInt(getUserId(context));// it will return string but we need int here
    const User = await prisma.user.findOne({ where: { id: userId } });
    if (User) {
      return true;
    } else {
      return false;
    }
  }),
};

export const permissions = shield({
  Query: {},
  Mutation: {},
});

isAuthenticatedUser is our new rule that will return true if there is any user exists otherwise it will return false

Let's look at createPost mutation

 t.field("createDraft", {
      type: "Post",
      args: {
        title: stringArg({ nullable: false }),
        content: stringArg(),
        authorEmail: stringArg(),
      },
      resolve: (_, { title, content, authorEmail }, ctx) => {
        return prisma.post.create({
          data: {
            title,
            content,
            published: false,
            author: {
              connect: { email: authorEmail },
            },
          },
        });
      },
    });

return type is Post
takes three arguments title, content , authorEmail
creates a new post and connect to user by provided email

Add this mutation to the permissions

import { rule, shield } from "graphql-shield";
import { PrismaClient } from "@prisma/client";
import { getUserId } from "../../../utils/decodejwt";
const prisma = new PrismaClient();

const rules = {
  isAuthenticatedUser: rule()(async (__parent, _args, context) => {
    const userId = parseInt(getUserId(context));
    const User = await prisma.user.findOne({ where: { id: userId } });
    if (User) {
      return true;
    } else {
      return false;
    }
  }),
};

export const permissions = shield({
  Query: {},
  Mutation: {
    createDraft: rules.isAuthenticatedUser,  // <-- added
  },
});

Now Our createDraft should be protected. let's see this in action

go to localhost:3000/api open a new tab and remove HTTP HEADERS and try to create a new post.

You should get an error Not Authorised!

Let's Try this with HTTP HEARDERS (undo ctrl + z)

All Mutation and Queries can be protect and additional rules can be applied.

graphql-shield also provide several Other methods like or, and, not etc. which can be very helpful and flexible in creating different rules

import { rule, shield } from "graphql-shield";
import { PrismaClient } from "@prisma/client";
import { getUserId } from "../../../utils/decodejwt";
const prisma = new PrismaClient();

const rules = {
  isAuthenticatedUser: rule()(async (__parent, _args, context) => {
    const userId = parseInt(getUserId(context));
    const User = await prisma.user.findOne({ where: { id: userId } });
    if (User) {
      return true;
    } else {
      return false;
    }
  }),
};

export const permissions = shield({
  Query: {
    post: rules.isAuthenticatedUser,
    feed: rules.isAuthenticatedUser,
    drafts: rules.isAuthenticatedUser,
    filterPosts: rules.isAuthenticatedUser,
  },
  Mutation: {
    createDraft: rules.isAuthenticatedUser,
    deletePost: rules.isAuthenticatedUser,
    publish: rules.isAuthenticatedUser,
  },
});

Note: if you are facing any trouble with above code you can checkout shield branch

git clone -b shield https://github.com/imran-ib/auntenticating-next-app.git

Now when user logs in we will store the token in local storage and and send that token with every request. But first we need a query that will return a user if there is token.

 t.field('CurrentUser', {
      type: 'User',
      nullable: true,
      resolve: async (_root, _agrs, ctx) => {
          //get the user id from token
        const userId = parseInt(getUserId(ctx));

        if (!userId) return;

        return ctx.prisma.user.findOne({
          where: { id: userId }
        });
      },
    });

Now we can determine weather user is logged in or not.

Now Let's move on to client side

create a new page in pages and name it private.

import { withApollo } from "../apollo/client";

const PrivatePage = () => {
  return <h1>This is Private Page </h1>;
};
export default withApollo(PrivatePage);

User should not be able to visit this page if he/she is not logged in

*NOTE: the post is already getting long so instead of creating login form we will send just email and password of user already registered directly in query *

let's modify pages/index.ts .

Changes we will make in this component

import gql and useMutation from @apollo/react-hooks
when user is successfully logged in we will push them to private route so for that we need router from next/router
create a mutation that will be responsible for logging user in
use the Mutation
useMutation has a method called onCompleted that will be called on success of mutation. so we will grab the token when mutation is successfully executed and store the token to local storage and push the user to private route.
Handle the loading and error state
create a button to log user in

So index.ts should look like this now

import { withApollo } from "../apollo/client";
import { gql, useMutation } from "@apollo/react-hooks";
import { useRouter } from "next/router";

const USER_LOGIN = gql`
  mutation UserLogin {
    userLogin(email: "john@exapmle.com", password: "123456")
  }
`;

const IndexPage = () => {
  const Router = useRouter();

  const [login, { data, loading, error }] = useMutation(USER_LOGIN, {
    onCompleted: (data) => {
      const token = data?.userLogin;
      localStorage.setItem("token", token);
      Router.push("/private");
    },
  });
  if (loading) return <p>Loading...</p>;
  if (loading) return <p>{error.message}</p>;
  return (
    <>
      <h1>Hello Next.js 👋</h1>
      <button onClick={() => login()}>Login</button>
    </>
  );
};
export default withApollo(IndexPage);

Now go to localhost:3000 and open developer tools and go to application tab. on the left side open local storage panel

Let's try this

GREATE

Now We will get that token from local storage and send it with every request

got apollo/client.js and update createApolloClient

we need to change the way we are creating client. we will create two links authLink and httpLink and concat the togehter

function createApolloClient() {
  // Declare variable to store authToken
  let token;

  const httpLink = createHttpLink({
    uri: "http://localhost:3000/api",
    credentials: "include",
  });

  const authLink = setContext((_, { headers }) => {
    // get the authentication token from local storage if it exists
    if (typeof window !== "undefined") {
      token = localStorage.getItem("token");
    }
    // return the headers to the context so httpLink can read them
    return {
      headers: {
        ...headers,
        Authorization: token ? `Bearer ${token}` : "",
      },
    };
  });

  const client = new ApolloClient({
    ssrMode: typeof window === "undefined",
    link: authLink.concat(httpLink),
    cache: new InMemoryCache(),
  });

  return client;
}

Entire File

import React from "react";
import Head from "next/head";
import { ApolloProvider, createHttpLink } from "@apollo/react-hooks";
import { ApolloClient } from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { setContext } from "@apollo/client/link/context";

let apolloClient = null;

/**
 * Creates and provides the apolloContext
 * to a next.js PageTree. Use it by wrapping
 * your PageComponent via HOC pattern.
 * @param {Function|Class} PageComponent
 * @param {Object} [config]
 * @param {Boolean} [config.ssr=true]
 */
export function withApollo(PageComponent, { ssr = true } = {}) {
  const WithApollo = ({ apolloClient, apolloState, ...pageProps }) => {
    const client = apolloClient || initApolloClient(apolloState);
    return (
      <ApolloProvider client={client}>
        <PageComponent {...pageProps} />
      </ApolloProvider>
    );
  };

  // Set the correct displayName in development
  if (process.env.NODE_ENV !== "production") {
    const displayName =
      PageComponent.displayName || PageComponent.name || "Component";

    if (displayName === "App") {
      console.warn("This withApollo HOC only works with PageComponents.");
    }

    WithApollo.displayName = `withApollo(${displayName})`;
  }

  if (ssr || PageComponent.getInitialProps) {
    WithApollo.getInitialProps = async (ctx) => {
      const { AppTree } = ctx;

      // Initialize ApolloClient, add it to the ctx object so
      // we can use it in `PageComponent.getInitialProp`.
      const apolloClient = (ctx.apolloClient = initApolloClient());

      // Run wrapped getInitialProps methods
      let pageProps = {};
      if (PageComponent.getInitialProps) {
        pageProps = await PageComponent.getInitialProps(ctx);
      }

      // Only on the server:
      if (typeof window === "undefined") {
        // When redirecting, the response is finished.
        // No point in continuing to render
        if (ctx.res && ctx.res.finished) {
          return pageProps;
        }

        // Only if ssr is enabled
        if (ssr) {
          try {
            // Run all GraphQL queries
            const { getDataFromTree } = await import("@apollo/react-ssr");
            await getDataFromTree(
              <AppTree
                pageProps={{
                  ...pageProps,
                  apolloClient,
                }}
              />
            );
          } catch (error) {
            // Prevent Apollo Client GraphQL errors from crashing SSR.
            // Handle them in components via the data.error prop:
            // https://www.apollographql.com/docs/react/api/react-apollo.html#graphql-query-data-error
            console.error("Error while running `getDataFromTree`", error);
          }

          // getDataFromTree does not call componentWillUnmount
          // head side effect therefore need to be cleared manually
          Head.rewind();
        }
      }

      // Extract query data from the Apollo store
      const apolloState = apolloClient.cache.extract();
      return {
        ...pageProps,
        apolloState,
      };
    };
  }

  return WithApollo;
}

/**
 * Always creates a new apollo client on the server
 * Creates or reuses apollo client in the browser.
 * @param  {Object} initialState
 */
function initApolloClient(initialState) {
  // Make sure to create a new client for every server-side request so that data
  // isn't shared between connections (which would be bad)
  if (typeof window === "undefined") {
    return createApolloClient(initialState);
  }

  // Reuse client on the client-side
  if (!apolloClient) {
    apolloClient = createApolloClient(initialState);
  }

  return apolloClient;
}

/**
 * Creates and configures the ApolloClient
 * @param  {Object} [initialState={}]
 */

function createApolloClient() {
  // Declare variable to store authToken
  let token;

  const httpLink = createHttpLink({
    uri: "http://localhost:3000/api",
    credentials: "include",
  });

  const authLink = setContext((_, { headers }) => {
    // get the authentication token from local storage if it exists
    if (typeof window !== "undefined") {
      token = localStorage.getItem("token");
    }
    // return the headers to the context so httpLink can read them
    return {
      headers: {
        ...headers,
        Authorization: token ? `Bearer ${token}` : "",
      },
    };
  });

  const client = new ApolloClient({
    ssrMode: typeof window === "undefined",
    link: authLink.concat(httpLink),
    cache: new InMemoryCache(),
  });

  return client;
}

Now we are sending auth token with every request.

Now Go To pages/private.tsx and create new query that will fetch current user

const CurrentUser = gql`
  query CurrentUser {
    CurrentUser {
      id
      name
      email
    }
  }
`;

get the data and handle loading and error state

  //NOTE we should use router in client side component instead of pages
  const Router = useRouter();
  const { data, loading, error } = useQuery(CurrentUser);
  if (loading) return <p>Loading...</p>;
  if (loading) return <p>{error.message}</p>;
  const user = data.CurrentUser;
  if (!user) Router.back();

if there is current user we will let them through otherwise we will push them back to home page

import { gql, useQuery } from "@apollo/react-hooks";
import { withApollo } from "../apollo/client";
import { useRouter } from "next/router";

const CurrentUser = gql`
  query CurrentUser {
    CurrentUser {
      id
      name
      email
    }
  }
`;

const PrivatePage = () => {
  //NOTE we should use router in client side component instead of pages
  const Router = useRouter();
  const { data, loading, error } = useQuery(CurrentUser);
  if (loading) return <p>Loading...</p>;
  if (loading) return <p>{error.message}</p>;
  const user = data.CurrentUser;
  if (!user) Router.back();

  return (
    <>
      <h1>This is Private Page </h1>
      {user?.id}
      {user?.email}
      {user?.name}
    </>
  );
};
export default withApollo(PrivatePage);

you can have a hook useUser where you can check weather there is a user logged in or not. import that hook in every component where needed.

FullStack Nextjs with Typescript, Graphql

Imran Irshad — Wed, 16 Sep 2020 20:16:19 +0000

Scaffolding a full stack project with a front-end and back-end is a real pain and takes time. It is nice to have a starter project that will help you up and running with minimum effort. So In this post we will learn how to build a full-stack web application from scratch that is typesafe and using graphql .

So What technologies are we going to use in this post.

These are the main techs we are going to use.

If You want to see the end result head on to this repo

Create Nextjs Project

To Create a Nextjs Project run the following command

npx create-next-app full-stack-nextjs --use-npm -e with-typescript

npx is a CLI tool whose purpose is to make it easy to install and manage dependencies hosted in the npm registry.

create-next-app is a tool which will create nextjs project and install all the dependencies.

full-stack-nextjs is name of our project. Alternatively you can name your project whatever you like.

--use-npm use npm our default package manager

-e for exact npm packages

with-typescript the project will be pre configured with typescript.

Additional Packages

cd into full-stack-nextjs and run the following command to install additional packages.

npm install @nexus/schema nexus-prisma apollo-server-micro @apollo/react-hooks apollo-client apollo-cache-inmemory @apollo/react-ssr apollo-link-http apollo-link-schema ts-node graphql graphql-tag express @prisma/cli @prisma/client --save

open tsconfig.json remove everything and paste following code

{
  "compilerOptions": {
    /* 
      Note that the "module" setting will be overriden by nextjs automatically
      (cf. https://github.com/zeit/next.js/discussions/10780).
      If you need to change it, you should use the --compiler-options or provide a separate 
      tsconfig.json entirely.
    */
    "module": "esnext",
    "target": "ES2019",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ]
}

if you want to know more checkout this repo

Your Folder structure should look like this. Don't worry if it is not the same because we are going to remove most of the files anyway.

components/
    Layout.tsx              --> remove this file
    List.tsx                --> remove this file
    ListDetail.tsx          --> remove this file
    ListItem.tsx            --> remove this file
interface/
    index.tsx
pages/
    api/
        users/              --> remove this folder
            index.tsx       
    users/                  --> remove this folder
        [id].tsx
        index.tsx 
    about.tsx               --> remove this file
    index.tsx
utils/                      --> remove this folder

After Removing the files and folders update pages/index.tsx

const IndexPage = () => (
  <>
    <h1>Hello Next.js 👋</h1>
  </>
);

export default IndexPage;

Your Folder structure should look like this.

Now Run npm run dev and go to localhost

You should see something like this in your browser

Front end of our app is ready to use . Let's create back end now.

API Routes

Nextjs Api Routes provide a straightforward solution to build your API with Next.js

Any file inside the folder pages/api is mapped to /api/* and will be treated as an API endpoint instead of a page. They are server-side only bundles and won't increase your client-side bundle size.

We Already have pages/api directory. We Don't need separate work environment for our backend.

let's get started with prisma

Prisma

Prisma is an open-source database toolkit

If You Did not install all the packages then please install Prisma client by running following command

npm install @prisma/cli @prisma/client --save-dev

After installation initialize prisma by following command

npx prisma init

After running above command prisma directory is created in root of our project that has two files init.

.evn for environment variable (make sure to include it in .gitignore)

schema.prisma for our prisma schema

.env file

DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"

You now need to adjust the connection URL to point to your own database

postgresql://USER:PASSWORD@HOST:PORT/DATABASE?schema=SCHEMA

USER: The name of your database user
PASSWORD: The password for your database user
PORT: The port where your database server is running (typically 5432 for PostgreSQL)
DATABASE: The name of the database
SCHEMA: The name of the schema inside the database

in this example I will be using local Database.

and shcema.prisma file

datasource db {
  provider = "postgresql"   //Database Alternatively you can use MySQL or SQLite 
  url      = env("DATABASE_URL") // url from .env file
}

generator client {
  provider = "prisma-client-js"  // To Genetate prisma client
}

Add Prisma Schema

datasource db {
  provider = "postgresql"   //Database Alternatively you can use MySQL or SQLite 
  url      = env("DATABASE_URL") // url from .env file
}

generator client {
  provider = "prisma-client-js"  // To Genetate prisma client
}

// Add Two Model User and Post
model User {
  email    String  @unique
  password String
  id       Int     @default(autoincrement()) @id
  name     String?
  posts    Post[]
}

model Post {
  authorId  Int?
  content   String?
  id        Int     @default(autoincrement()) @id
  published Boolean @default(false)
  title     String
  author    User?   @relation(fields: [authorId], references: [id])
}

Add These Scripts to your package.json

"generate": "npm -s run generate:prisma && npm -s run generate:nexus",
"dev:migrate": "prisma2 migrate save --experimental -c && prisma2 migrate up --experimental -c",
"generate:prisma": "prisma generate",
"generate:nexus": "ts-node --transpile-only -P nexus.tsconfig.json pages/api"

Now run npm run dev:migrate

You should see something like this

*If You Don't see something like this and see an error message please make sure you added database credentials correctly * you can find more info here

To See visually our Models

Run npx prisma studio and visit http://localhost:5555/

In the root if the project create new file nexus.tsconfig.json

{
  /* 
    This file is used as a workaround for https://github.com/graphql-nexus/schema/issues/391
    It allows the nexus schema generation to work (done via `npm run generate:nexus`).
  */
  "compilerOptions": {
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "lib": ["esnext"],
    "esModuleInterop": true
  }
}

Backend Server

in pages/api create new file index.ts

Let's Create server.

to create server we will use apollo-server-micro if you haven't already install npm install apollo-server-micro

Note: If You are copy pasting don't copy yet. I will leave a note when you should copy

import { ApolloServer } from 'apollo-server-micro'

const server = new ApolloServer();

  export default server.createHandler({
    path: "/api",
  });

But Our Apollo Server need a schema. Lets create One.

in same file add following code

import { makeSchema } from "@nexus/schema";
import path from "path";

const schema = makeSchema({
  types: [], // we will create types later
  outputs: {
    typegen: path.join(process.cwd(), "pages", "api", "nexus-typegen.ts"),
    schema: path.join(process.cwd(), "pages", "api", "schema.graphql"),
  },
});

Create TypeDefs

bring in prisma by importing @prisma/client

import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()

User and Post Model Type

const User = objectType({
  name: 'User',
  definition(t) {
    t.int('id')
    t.string('name')
    t.string('email')
    t.list.field('posts', {
      type: 'Post',
      resolve: parent =>
        prisma.user
          .findOne({
            where: { id: Number(parent.id) },
          })
          .posts(),
    })
  },
})

const Post = objectType({
  name: 'Post',
  definition(t) {
    t.int('id')
    t.string('title')
    t.string('content', {
      nullable: true,
    })
    t.boolean('published')
    t.field('author', {
      type: 'User',
      nullable: true,
      resolve: parent =>
        prisma.post
          .findOne({
            where: { id: Number(parent.id) },
          })
          .author(),
    })
  },
})

*Mutation and Query *



const Query = objectType({
  name: 'Query',
  definition(t) {
    t.field('post', {
      type: 'Post',
      args: {
        postId: stringArg({ nullable: false }),
      },
      resolve: (_, args) => {
        return prisma.post.findOne({
          where: { id: Number(args.postId) },
        })
      },
    })

    t.list.field('feed', {
      type: 'Post',
      resolve: (_parent, _args, ctx) => {
        return prisma.post.findMany({
          where: { published: true },
        })
      },
    })

    t.list.field('drafts', {
      type: 'Post',
      resolve: (_parent, _args, ctx) => {
        return prisma.post.findMany({
          where: { published: false },
        })
      },
    })

    t.list.field('filterPosts', {
      type: 'Post',
      args: {
        searchString: stringArg({ nullable: true }),
      },
      resolve: (_, { searchString }, ctx) => {
        return prisma.post.findMany({
          where: {
            OR: [
              { title: { contains: searchString } },
              { content: { contains: searchString } },
            ],
          },
        })
      },
    })
  },
})


const Mutation = objectType({
  name: "Mutation",
  definition(t) {
    t.field("signupUser", {
      type: "User",
      args: {
        name: stringArg(),
        email: stringArg({ nullable: false }),
        password: stringArg({ nullable: false }),
      },
      resolve: (_, { name, email, password }, ctx) => {
        return prisma.user.create({
          data: {
            name,
            email,
            password,
          },
        });
      },
    });

    t.field("deletePost", {
      type: "Post",
      nullable: true,
      args: {
        postId: stringArg(),
      },
      resolve: (_, { postId }, ctx) => {
        return prisma.post.delete({
          where: { id: Number(postId) },
        });
      },
    });

    t.field("createDraft", {
      type: "Post",
      args: {
        title: stringArg({ nullable: false }),
        content: stringArg(),
        authorEmail: stringArg(),
      },
      resolve: (_, { title, content, authorEmail }, ctx) => {
        return prisma.post.create({
          data: {
            title,
            content,
            published: false,
            author: {
              connect: { email: authorEmail },
            },
          },
        });
      },
    });

    t.field("publish", {
      type: "Post",
      nullable: true,
      args: {
        postId: stringArg(),
      },
      resolve: (_, { postId }, ctx) => {
        return prisma.post.update({
          where: { id: Number(postId) },
          data: { published: true },
        });
      },
    });
  },
});

pass types to our schema


const schema = makeSchema({
  types: [Query, Mutation, Post, User],
  outputs: {
    typegen: path.join(process.cwd(), "pages", "api", "nexus-typegen.ts"),
    schema: path.join(process.cwd(), "pages", "api", "schema.graphql"),
  },
});

Now Your file should Look Like this

Note: You can copy this code and paste it in your server.ts file

import { makeSchema, objectType, stringArg } from "@nexus/schema";
import { PrismaClient } from "@prisma/client";
import { ApolloServer } from "apollo-server-micro";
import path from "path";

const prisma = new PrismaClient();

const User = objectType({
  name: "User",
  definition(t) {
    t.int("id");
    t.string("name");
    t.string("email");
    t.list.field("posts", {
      type: "Post",
      resolve: (parent) =>
        prisma.user
          .findOne({
            where: { id: Number(parent.id) },
          })
          .posts(),
    });
  },
});

const Post = objectType({
  name: "Post",
  definition(t) {
    t.int("id");
    t.string("title");
    t.string("content", {
      nullable: true,
    });
    t.boolean("published");
    t.field("author", {
      type: "User",
      nullable: true,
      resolve: (parent) =>
        prisma.post
          .findOne({
            where: { id: Number(parent.id) },
          })
          .author(),
    });
  },
});

const Query = objectType({
  name: "Query",
  definition(t) {
    t.field("post", {
      type: "Post",
      args: {
        postId: stringArg({ nullable: false }),
      },
      resolve: (_, args) => {
        return prisma.post.findOne({
          where: { id: Number(args.postId) },
        });
      },
    });

    t.list.field("feed", {
      type: "Post",
      resolve: (_parent, _args, ctx) => {
        return prisma.post.findMany({
          where: { published: true },
        });
      },
    });

    t.list.field("drafts", {
      type: "Post",
      resolve: (_parent, _args, ctx) => {
        return prisma.post.findMany({
          where: { published: false },
        });
      },
    });

    t.list.field("filterPosts", {
      type: "Post",
      args: {
        searchString: stringArg({ nullable: true }),
      },
      resolve: (_, { searchString }, ctx) => {
        return prisma.post.findMany({
          where: {
            OR: [
              { title: { contains: searchString } },
              { content: { contains: searchString } },
            ],
          },
        });
      },
    });
  },
});

const Mutation = objectType({
  name: "Mutation",
  definition(t) {
    t.field("signupUser", {
      type: "User",
      args: {
        name: stringArg(),
        email: stringArg({ nullable: false }),
        password: stringArg({ nullable: false }),
      },
      resolve: (_, { name, email, password }, ctx) => {
        return prisma.user.create({
          data: {
            name,
            email,
            password,
          },
        });
      },
    });

    t.field("deletePost", {
      type: "Post",
      nullable: true,
      args: {
        postId: stringArg(),
      },
      resolve: (_, { postId }, ctx) => {
        return prisma.post.delete({
          where: { id: Number(postId) },
        });
      },
    });

    t.field("createDraft", {
      type: "Post",
      args: {
        title: stringArg({ nullable: false }),
        content: stringArg(),
        authorEmail: stringArg(),
      },
      resolve: (_, { title, content, authorEmail }, ctx) => {
        return prisma.post.create({
          data: {
            title,
            content,
            published: false,
            author: {
              connect: { email: authorEmail },
            },
          },
        });
      },
    });

    t.field("publish", {
      type: "Post",
      nullable: true,
      args: {
        postId: stringArg(),
      },
      resolve: (_, { postId }, ctx) => {
        return prisma.post.update({
          where: { id: Number(postId) },
          data: { published: true },
        });
      },
    });
  },
});

export const schema = makeSchema({
  types: [Query, Mutation, Post, User],
  outputs: {
    typegen: path.join(process.cwd(), "pages", "api", "nexus-typegen.ts"),
    schema: path.join(process.cwd(), "pages", "api", "schema.graphql"),
  },
});

export const config = {
  api: {
    bodyParser: false,
  },
};

export default new ApolloServer({ schema }).createHandler({
  path: "/api",
});

Connect Our Backend to Our frontend with Apollo Client

In the Root of our project create new file apollo/clinet.js and paste following code.

Note You need these packages @apollo/react-hooks apollo-client apollo-cache-inmemory @apollo/react-ssr apollo-link-http apollo-link-schema

import React from 'react'
import Head from 'next/head'
import { ApolloProvider } from '@apollo/react-hooks'
import { ApolloClient } from 'apollo-client'
import { InMemoryCache } from 'apollo-cache-inmemory'

let apolloClient = null

/**
 * Creates and provides the apolloContext
 * to a next.js PageTree. Use it by wrapping
 * your PageComponent via HOC pattern.
 * @param {Function|Class} PageComponent
 * @param {Object} [config]
 * @param {Boolean} [config.ssr=true]
 */
export function withApollo(PageComponent, { ssr = true } = {}) {
  const WithApollo = ({ apolloClient, apolloState, ...pageProps }) => {
    const client = apolloClient || initApolloClient(apolloState)
    return (
      <ApolloProvider client={client}>
        <PageComponent {...pageProps} />
      </ApolloProvider>
    )
  }

  // Set the correct displayName in development
  if (process.env.NODE_ENV !== 'production') {
    const displayName =
      PageComponent.displayName || PageComponent.name || 'Component'

    if (displayName === 'App') {
      console.warn('This withApollo HOC only works with PageComponents.')
    }

    WithApollo.displayName = `withApollo(${displayName})`
  }

  if (ssr || PageComponent.getInitialProps) {
    WithApollo.getInitialProps = async ctx => {
      const { AppTree } = ctx

      // Initialize ApolloClient, add it to the ctx object so
      // we can use it in `PageComponent.getInitialProp`.
      const apolloClient = (ctx.apolloClient = initApolloClient())

      // Run wrapped getInitialProps methods
      let pageProps = {}
      if (PageComponent.getInitialProps) {
        pageProps = await PageComponent.getInitialProps(ctx)
      }

      // Only on the server:
      if (typeof window === 'undefined') {
        // When redirecting, the response is finished.
        // No point in continuing to render
        if (ctx.res && ctx.res.finished) {
          return pageProps
        }

        // Only if ssr is enabled
        if (ssr) {
          try {
            // Run all GraphQL queries
            const { getDataFromTree } = await import('@apollo/react-ssr')
            await getDataFromTree(
              <AppTree
                pageProps={{
                  ...pageProps,
                  apolloClient,
                }}
              />
            )
          } catch (error) {
            // Prevent Apollo Client GraphQL errors from crashing SSR.
            // Handle them in components via the data.error prop:
            // https://www.apollographql.com/docs/react/api/react-apollo.html#graphql-query-data-error
            console.error('Error while running `getDataFromTree`', error)
          }

          // getDataFromTree does not call componentWillUnmount
          // head side effect therefore need to be cleared manually
          Head.rewind()
        }
      }

      // Extract query data from the Apollo store
      const apolloState = apolloClient.cache.extract()
      return {
        ...pageProps,
        apolloState,
      }
    }
  }

  return WithApollo
}

/**
 * Always creates a new apollo client on the server
 * Creates or reuses apollo client in the browser.
 * @param  {Object} initialState
 */
function initApolloClient(initialState) {
  // Make sure to create a new client for every server-side request so that data
  // isn't shared between connections (which would be bad)
  if (typeof window === 'undefined') {
    return createApolloClient(initialState)
  }

  // Reuse client on the client-side
  if (!apolloClient) {
    apolloClient = createApolloClient(initialState)
  }

  return apolloClient
}

/**
 * Creates and configures the ApolloClient
 * @param  {Object} [initialState={}]
 */
function createApolloClient(initialState = {}) {
  const ssrMode = typeof window === 'undefined'
  const cache = new InMemoryCache().restore(initialState)

  return new ApolloClient({
    ssrMode,
    link: createIsomorphLink(),
    cache,
  })
}

function createIsomorphLink() {
  const { HttpLink } = require('apollo-link-http')
  return new HttpLink({
    uri: 'http://localhost:3000/api',
    credentials: 'same-origin',
  })
}

Now Go to pages/index.ts and import WithApollo

import { withApollo } from "../apollo/client";

const IndexPage = () => (
  <>
    <h1>Hello Next.js 👋</h1>
  </>
);

export default withApollo(IndexPage);

We have Script in package.json named generate

"generate": "npm -s run generate:prisma && npm -s run generate:nexus",

that command in responsible for generating types and schema.

After running this command you should see two file in your pages/api nexus-typegen.ts and schema.graphql

Now Let's Head on to http://localhost:3000/api

There you have it. you can carryon with this project to build your full stack application.

In the next post I will be showing you have you can implement authencation with this flow.

Javascript Searching Algorithms

Imran Irshad — Tue, 08 Sep 2020 21:33:30 +0000

In This Post, I will try to cover search in javascript. It is not going to be any complicated searching algorithm but rather simpler algorithms that are commonly used. Javascript provides several search methods like indexOf includes find and many others. Our Focus here would be on how to implement our version of these methods.

We will cover two algorithms in this post Linear Search and Binary Search.

First thing first the coding environment. You Can use any editor you want local or online. But here I will be using google chrome snippets. Our code will be plain javascript therefore we don't need any fancy environment. If you want to follow along head on to google chrome's dev tools ctrl + shift + I . Click on the sources tab and from the left navigator select snippets. Create new snippets and name it linearSearch.

we can use ctrl + Enter to run the code as you can see at the bottom of the above image. Now that that's out of the way lets begin.

Linear Search

All the javascript search methods like find, indexOf etc. are using Linear Search. This is the simplest way of searching. Given an array, we look at every element to find what we are looking for. We check one item at a time starting from the beginning of the array or end of the array. Let's say we have a list

const list = [12, 45, 48, 5, 451, 2,34 ,43,54,66 ]

we want to search for 2. The data is not sorted in this array so the best approach would be to loop through every item in the array and check if the current iteration is equal to 2

pretty Simple Right.

Lets Code this. How are we going to approach this? Let's Break it down into pieces.

We will write a function named you guessed it linearSearch. That function will accept two arguments. an array and a value.
Inside that function, we will loop through the entire array and check if current item is equal to value.
If The value is found we will return the index of that value otherwise we will return false or -1

Step One

A function that will accept two arguments



var linearSearch = (list,value)=>{}

If you are using google chrome Snippets and want to use const or let Please use let because if you use const you cannot redeclare the variable and google chrome console will through an error.

Step Two

First, create a list and value. Two arguments our function needs.



let linearSearch = (list,value)=>{}

var list =  [12, 45, 48, 5, 451, 2,34 ,43,54,66 ]
var value = 2;

linearSearch(list , value) // call the function with arguments

Now we will implement the Logic.



 let linearSearch = (list,value)=>{
    for (let i = 0; i < list.length; i++) {
        if (list[i] === value) {
            return i;
        }
    }
    return -1;
}

var list =  [12, 45, 48, 5, 451, 2,34 ,43,54,66 ]
var value = 2;

linearSearch(list , value) // result should 5

Let's try to understand what is going on inside the loop

We can refer to an element inside an array as arr[0] this will give us the first value and arr[1] will give us the second value and so on.

Let see this in action

in our loop i will be incremented from 0 to 9. on each iteration we will get the value from list of that index list[i] and compare it with our argument value;

we can confirm this with bydebugger in our snippet

I clicked on line 4 to add debugger. You can see step by step iteration by pressing f9. The above step is the step where we find our match( step 6 with i = 5). You can see in the Block panel (left side) all the variables we have access to.

I would Suggest you play around with debugger to see the call Stack Block local and global scope

We are returning -1 outside of the loop if we don't find the match.

NOTE: Return -1 outside of the loop

Final Step

Let's check the condition where value is not in list

Great! It is working

*Keep that in mind that array can be sorted or unsorted in linear search * The best-case scenario is we will find the item we are looking for immediately and worst-case scenario is that our required item is the last item in the array. For small arrays, it works fine but for large arrays performance might not be ideal.

Let's Move on to Binary Search Now.

Binary Search

Binary search is a much faster algorithm because of the way it works. At any given point it eliminates half of the array.

But The only caveat is it only works on Sorted arrays.

How it works

Because the array is sorted we pick the middle point of the array. After setting the middle point we will check if the value we are looking for is greater then or less then our midpoint. If The Value is greater then the midpoint that means our value is on the right side of our midpoint so we don't need left (or less then side) so we ditch the left side and look in the right side. We will keep doing that until we find our value.

confused.?

Let's try to visualize this. Define our array first.



let list = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30];

let's say we are looking for 20

We Need three points left , right , middle

left = 2

right = 30

mid point could be 14 or 16. I am going to pick 14

our mid point is 14 and our value is 20 so we will eliminate the left side which is from 2 to 14

our arrays would look like this now



let list = [16, 18, 20, 22, 24, 26, 28, 30];

our next mid point will be our value between 22 and 24 we will pick 22 and left = 16, right = 30

From our mid (22), is our value (20) grater or less? It's less than right.? so this time we eliminate items on the right side

our new array should look like this



let list = [16, 18, 20, 22];

mid point 18 left 16 right 22.

our value is greater than 18



let list = [20, 22];

mid point === 20

Mid point === value

In Just Three loops we have found our Value. If We do the same with linear search it would take around 10 loops to find value 20

binary search is much faster. But it only works in sorted data.

Lets code this. So How Should we approach this? Let's think this through.

We will write a function that accepts two arguments a sorted array and a value.
we need Left and Right pointers. So We will create variable left whose value will be the first item in our array and the right variable whose value will be the last item in the array
- we also need a middle point which we can get from an average of left and right
we will loop until the mid === value
- if we find the value we will return the index if that value
- if the value is too small we will move left pointer up to the previous mid point and recalculate the mid point
- if the value is too large we will move the right pointer down to the mid point and so on and on until we find our value.
If Value Not found we will return false or -1

Hwww. That is a lot but let's get through this step by step.

Let's define a function, a sorted array, and a value.



let BinarySearch = (list,val)=>{}

let list = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30]
let val = 20;

We Need Three pointers here. left, right, mid



  let left = 0;
  let right = list.length - 1;
  let mid = Math.floor((left + right) / 2);

left is 0 because arrays are zero index so the first item in the array will at 0 index.

right again because arrays are zero index so to get the last item we will subtract 1 from its length.

mid to calculate average we use this formula (left + right) / 2. we don't want decimal number so we use javascript built in method Math.floor(). You can also use Math.ceil()

to loop through the array we will use while loop



let BinarySearch = (list,val)=>{
    let left = 0;
    let right = list.length - 1;
    let mid = Math.floor((left + right) / 2);

    while (list[mid] !== val && left <= right) {
        if (val < list[mid]) {
            right = mid - 1
        } else {
            left = mid + 1
        }
        mid = Math.floor((left + right) / 2);
    }
    if (list[mid] === val) {
        return mid;
    } else {
        return -1
    }

}
;

let list = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30]
let val = 20;
// should return 9

BinarySearch(list, val);

Scary huh.? Let's Walk this through

First, we will try to understand while loop



 while (list[mid] !== val) {
        if (val < list[mid]) {
            right = mid - 1
        } else {
            left = mid + 1
        }
        mid = Math.floor((left + right) / 2);
    }

in first line we are saying loop until the current iteration item is not equal to value.

inside the loop we checking our conditions

if our value (20) is less then the current iteration item that means we need to move the right end towards the middle.

otherwise the value is greater then current iteration item so our left should move towards the middle.

on each iteration, we are recalculating our middle point. The Above code will work fine until we provide false value.

in case of false or no match, we will be in infinite loop. So We need to handle it appropriately.

First of all we want the code to run until left is greater than or equal to right.

So Modify the above code.



  while (list[mid] !== val && left <= right) { // <-- modified
        if (val < list[mid]) {
            right = mid - 1
        } else {
            left = mid + 1
        }
        mid = Math.floor((left + right) / 2);
    }

And Check if our mid point is equal to the value we are looking for then return mid otherwise return -1



while (list[mid] !== val && left <= right) {
        if (val < list[mid]) {
            right = mid - 1
        } else {
            left = mid + 1
        }
        mid = Math.floor((left + right) / 2);
    }

// add this code
    if (list[mid] === val) {
        return mid;
    } else {
        return -1
    }

let's Test this out

With False value

Conclusion

Both Binary Search and Linear Search has there own pros and cons. Linear Search loop through every item of the array which in large arrays would be less performant. But it works on all kinds of arrays. Binary Search on the other hand can be a lot faster but the downside to this algorithm is that it only works with sorted arrays.

Build A Next.js Markdown Blog.

Imran Irshad — Sun, 06 Sep 2020 19:24:57 +0000

Note: This is an advanced Topic So I assume you are already familiar with React, JavaScript, and basics of web development.

Next.Js

Nextjs is a React framework. It is the most popular framework because it is easy to use, very flexible, and has a great file-based routing system. It gives you server-side rendering out of the box.

Let's Dive in

if You don't want to code along and only want to see the code please checkout source code

I Had to create blogs for my personal portfolio site. And there are few posts on the internet but I could not find any simple solution. So I decided To write a simple post about this. Lets Start

To Create a nextjs app run the following Command in terminal

npm init next-app
# or
yarn create next-app

You can use npm or yarn package manager but I will be using yarn

Give your project a name. The Package manager will install all the necessary packages.

Run this command

cd YOUR_PROJECT_NAME

start the Project

yarn dev

Your project should be online on port 3000. and you should see something like this

Great. In pages/index.js remove everything and paste following code

import React from "react";

const Index = () => {
  return <h1>My First Blog ✍ </h1>;
};

export default Index;

create a file config.json in the root of the folder and provide site title and description. (This step is for SEO purpose).

{
  "title": "Nextjs Blog Site",
  "description": "A Simple Markdown Blog build with Nextjs."
}

create a folder in the root directory called content. This is where our .md files will go.

Now Your Folder structure should look like this

components directory will contain our blogs logic

content directory will contain our markdown files

pages directory contains our pages (routes)

public directory for serving static files (assets)

Lets open pages/index.jsand bring in the site title and description from config.json

import React from "react";

const Index = (props) => {
  console.log("Index -> props", props);

  return <h1>My First Blog ✍ </h1>;
};

export default Index;


export async function getStaticProps() {
  const siteData = await import(`../config.json`);

  return {
    props: {
      title: siteData.default.title,
      description: siteData.default.description,
    },
  };
}

After You Save this page you should see something like this in your browser's console.

Index -> props {title: "Nextjs Blog Site", description: "A Simple Markdown Blog build with Nextjs."}.

Ok So What just Happened here. Let's Break it down

getStaticProps getStaticProps is Nextjs Function which we can call from our page . It will return the props to our component. just like we have props to our index

We will use this method to fetch our posts later.

The content will be generated at the build time. If you don't know what it means don't worry about it just keep that in mind that the content will be available prebuild and we will not be fetching posts every time user visits our site. Pretty Cool right.

we are importing our config.json file and returning title and description as props to our index components

Next.js also gives us the Head component that we can append elements to the head of the page. like site title, meta tags links, and such.

import Head from 'next/head'

 <Head>
    <title>My page title</title>
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  </Head>

Let's add this to our Index page

import React from "react";
import Head from "next/head";

const Index = (props) => {
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta charSet="utf-8" />
        <meta name="Description" content={props.description}></meta>
        <title>{props.title}</title>
      </Head>
      <h1>My First Blog ✍ </h1>;
    </>
  );
};

export default Index;

export async function getStaticProps() {
  const siteData = await import(`../config.json`);

  return {
    props: {
      title: siteData.default.title,
      description: siteData.default.description,
    },
  };
}

After adding Head take a look at the tab of your browser, what do you see? The Title of the site has been updated.

Ideally you would want to put this to Layout component but in our case, I think this is fine.

Now back to our Blogs. We Need To add some packages to our project. Run The Following command
yarn add react-markdown gray-matter raw-loader

npm install react-markdown gray-matter raw-loader

react-markdown will help us parse and render markdown files

gray-matter will parse front matter of our blogs. (the part at the top of file between --- )

We will need this metadata for title , data and description and slug. You can add anything you like here (maybe hero image URL)

raw-loader will help us import our markdown files.

After we are done with installation we need a little bit of web pack configuration. create a file next.config.js in the root directory

and paste the following code.

module.exports = {
  webpack: function(config) {
    config.module.rules.push({
      test: /\.md$/,
      use: 'raw-loader',
    })
    return config
  }
}

NOTE: After you Create This file You Must Restart your dev server.

In the content directory create two markdown files

content/blog-one.md

---

slug: blog-one
title: My First Blog
description: This Description Of My First Blog.
date: 25-September-2020
---

# h1

## h2

### h3

Normal text

content/blog-two.md

---
slug: blog-two
title: My Second Blog
description: This Description Of My Second Blog.
date: 25-September-2020
---

# h1

## h2

### h3

Normal text

First, we will render lists of blogs with titles and descriptions.

in our index.js replace the getStaticProps function with

export async function getStaticProps() {
  const siteData = await import(`../config.json`);
  const fs = require("fs");

  const files = fs.readdirSync(`${process.cwd()}/content`, "utf-8");

  const blogs = files.filter((fn) => fn.endsWith(".md"));

  const data = blogs.map((blog) => {
    const path = `${process.cwd()}/content/${blog}`;
    const rawContent = fs.readFileSync(path, {
      encoding: "utf-8",
    });

    return rawContent;
  });

  return {
    props: {
      data: data,
      title: siteData.default.title,
      description: siteData.default.description,
    },
  };
}

fs is nodejs module that helps us read and write files. we will use fs.readdirSync to read the files.

process.cwd() will give us the directory where Next.js is being executed. From Our current directory (root) we want to go in /content and read all the files and store them in variable files

endsWith endsWith is a JavaScript string method which determines whether a string ends with the characters of a specified string, returning true or false as appropriate.

we will map over the blogs and get path and rawContent

Now Our index components will receive data prop.

import React from "react";
import Head from "next/head";
import matter from "gray-matter";
import Link from "next/link";

const Index = ({ data, title, description }) => {
  const RealData = data.map((blog) => matter(blog));
  const ListItems = RealData.map((listItem) => listItem.data);

  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta charSet="utf-8" />
        <meta name="Description" content={description}></meta>
        <title>{title}</title>
      </Head>
      <h1>My First Blog ✍ </h1>;
      <div>
        <ul>
          {ListItems.map((blog, i) => (
            <li key={i}>
              <Link href={`/${blog.slug}`}>
                <a>{blog.title}</a>
              </Link>
                <p>{blog.description}</p>
            </li>
          ))}
        </ul>
      </div>
    </>
  );
};

We are mapping over data and formatting each blog with gray-matter;

At this point, Your should see something like this

if You click on My First Blog it should take you to /blog-one or whatever you named your blog

Dynamic Routes

we May have fifty different blogs. we Don't want to page for each blog. if we make a file in pages directory blog we can navigate to localhost:3000/blog. But if add square brackets around blog (name of file) like so [blog].js we have a dynamic route.

the route will end up to localhost:3000/:blog

Create a new page [blog].js in pages directory

import react from "react";

const Blog = () => {
  return <h1>Blog</h1>;
};

export default Blog;

Now Lets Get the file from content Directory

Blog.getInitialProps = async (context) => {
  const { blog } = context.query;

  const content = await import(`../content/${blog}.md`);
  const data = matter(content.default);

  return { ...data };
};

You Should have content and data prop available in the Blog component

import react from "react";
import matter from "gray-matter";
import ReactMarkdown from "react-markdown";

const Blog = ({ content, data }) => {
  const frontmatter = data;

  return (
    <>
      <h1>{frontmatter.title}</h1>
      <h3>{frontmatter.description}</h3>
      <ReactMarkdown escapeHtml={true} source={content} />
    </>
  );
};

export default Blog;

Blog.getInitialProps = async (context) => {
  const { blog } = context.query;
  // Import our .md file using the `slug` from the URL
  const content = await import(`../content/${blog}.md`);
  const data = matter(content.default);

  return { ...data };
};

Oh My Goodness. It is working.

What about Code

For Code formatting, we will use the react-syntax-highlighter package

yarn add react-syntax-highlighter

Now Create a code Block in [blog].js and pass it to ReactMarkdown

import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";

const CodeBlock = ({ language, value }) => {
  return (
    <SyntaxHighlighter showLineNumbers={true} language={language}>
      {value}
    </SyntaxHighlighter>
  );
};

Now Your [blog].js should look like this

import react from "react";
import matter from "gray-matter";
import ReactMarkdown from "react-markdown";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";

const CodeBlock = ({ language, value }) => {
  return (
    <SyntaxHighlighter showLineNumbers={true} language={language}>
      {value}
    </SyntaxHighlighter>
  );
};

const Blog = ({ content, data }) => {
  const frontmatter = data;

  return (
    <>
      <h1>{frontmatter.title}</h1>
      <h3>{frontmatter.description}</h3>
      <ReactMarkdown
        escapeHtml={true}
        source={content}
        renderers={{ code: CodeBlock }}
      />
    </>
  );
};

export default Blog;

Blog.getInitialProps = async (context) => {
  const { blog } = context.query;
  // Import our .md file using the `slug` from the URL
  const content = await import(`../content/${blog}.md`);
  const data = matter(content.default);

  return { ...data };
};

Create a new File in the content directory conding-blog.md

---
slug: coding-blog
title: Coding blog
author: Imran Irshad
description: Coding Post For Beautiful Code
date: 30-September-2020
---

# React Functional Component

```

jsx
import React from "react";

const CoolComponent = () => <div>I'm a cool component!!</div>;

export default CoolComponent;




Now If  Click `coding-blog`  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/odmz8jspshglv9fbdg3j.png)

## Images

Create a new file in `content`  named `image-blog`

markdown

slug: image-blog
title: Image Blog
description: See How Images Looks in our Blog

date: 30-September-2020

Image

Conclusion

Nextjs is awesome and very flexible. You can create really cool stuff with it. I hope you learned a thing or two from this post.