Nextjs
Published in

Nextjs

How to create a static blog with logging functionality?
create a static blog with logging functionality in nextjs

How to create a static blog with logging functionality?

Static blog with content layer, markdown, next-auth, and nextjs

The big issue I face in building a static blog with login functionality in nextjs. The next-auth library is helping to create a login functionality.

Current articles are part of my content layer series—the content layer help to manage our markdown content more efficiently.

Basis information

Github repo and demo link

Version History

"next": "12.1.5","next-auth": "^4.10.3","contentlayer": "^0.2.4",

Let's start

  1. Install next-auth
  2. Setup next-auth
  3. Create Login component
  4. Protect pages with next-auth
  5. Important points
  6. Server-side pages protection

Note:

I highly encourage you to read my old article on the content layer series. Then follow this article. If you are not a beginner, then follow. It is easy for you.

Install next-auth

The first step is to install the next-auth in your project. Using the package manager.

npm install next-auth
or
yarn add next-auth
or
pnpm add next-auth

Read full details article on next-auth

https://medium.com/nextjs/how-to-set-up-the-next-auth-library-for-development-and-production-in-nextjs-103e9e4e9691

Setup next-auth

In your project, create a next-auth API and configure the global session state in nextjs

  1. next-auth API setup
  2. Config session state _app.js

next-auth API setup

Next-auth APIs help to set up provide and all other next-auth APIs. simple paste the following code in pages/api/auth/[...nextauth].js . In my case, I'm only enabling GitHub authorization. If you have to add additional providers, you can also add them.

Paste code […nextauth].js

Config session state _app.js

Config the next-auth session utility in _app.js a file. In my case, I add a further configuration for my project.

paste code _app.js

Create Login component

I create my login page for next-auth and config into [...nextauth].js file into pages section.

pages: { signIn: '/' }
Create your component for the login page.

Protect pages with next-auth

For the static sites, I use useSesstion hook to protect the page. If the user has a session, that means the user all ready login. then the user sees the main component . If the user does not log in, then the user sees login component on the screen.

After, I apply the same logic for every page in nextjs, with the help of the next-auth library.

index page with login functionality

Important points

  1. In this example, I show the login session store locally, not on the server side.
  2. The server side does not support middleware nextjs.

Server-side pages protection

You never face too many redirection errors in nextjs, and the code is simple and clean.

Note

There are many ways to handle the project page with next-auth. My example of code is repeated for every page. For beginner people, I use an easy example to explain the topic.

Read more about auth

Conclusion

Next-auth is a great library to handle authorization for nextjs. With next-auth, you manage the users and redirect users to the dashboard or login page.

Next-auth comes with many providers and Adapter; you handle authorization with the database. Some common Adapter example is Prisma, MongoDB, etc.

You can follow and read more articles on officialrajdeepsingh.dev and follow on Twitter and Linkedin.

Read More content on the Nextjs. Sign up for a free newsletter and join the nextjs community on medium.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep singh

Rajdeep singh

527 Followers

JavaScript || Reactjs || Nextjs || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || Writer || https://officialrajdeepsingh.dev/