
**In my opinion, if you really want to be a developer, one day you must have your own blog.There are many tools in the market for this. However, making your own blog is important for both **improving yourself** and gaining **Self-Confidence** as a software developer. I set out with this way of thinking and aimed to create a blog within 3 days. While doing this, my main goal was to use **the latest technologies**. This article is the story of this journey.**

# Hello Cruel World👋

Keeping a blog nowadays is important for a software developer. Here, you can both take notes for yourself about what you have learned, and guide other software developers by sharing your knowledge and experience. On the other hand, a long personal blog is welcomed by employers and project managers very positively.

 As I said before, there are many tools for this. E.g

- [dev.to](https://dev.to)

- [Hashnode](https://hashnode.com/)

- [hackernoon](https://hackernoon.com/)

Although these tools are very easy and useful for blogging, it seems to me that having a developer's own blog will give him/her  many advantages.

I set out with these goals and decided to develop a programming-based blog.🤨 But I had to do this as fast as I could as I couldn't devote much time to this development due to my works. And also I wanted to do this with cutting edge technologies.💻 So I set several Frameworks. These:

> - Astro.js + Markdown
- Template Language + pure JS + CMS
- Angular + CMS/Markdown
- Scully + Markdown
- Next.js + MDX

Although each Framework has its own advantages, I finally decided to use **Next.js**. Because in this option, I would be able to use both **React** and benefit from the privileges and comfort of **MDX**.

<Warning type="info">
  On the other hand i had no experience with Next.js so it is always good to push yourself forward.😣
</Warning>

---

I immediately started researching **Github** to get going quickly. And the template prepared for him by a software developer named **Samuel** caught my attention. I immediately forked this from Github and started coding.When i run the code on my localhost a lot of error occurred and i searched,found and tweaked all the codes that give me error. I have added the features I want to add in general.


For example there is no pagination in the original code so all blog posts sits on the one page.So i implemented **pagination** like this :


```jsx:Pagination

  const totalPosts = filteredPosts.length,
       limit=3,
       pages = Math.ceil(filteredPosts.length / limit),
       hasNextPage = Math.ceil(totalPosts / limit) > pageNumber,
       hasPreviousPage = pageNumber > 1,
       viewPosts= filteredPosts.slice((pageNumber - 1) * limit, pageNumber * limit)
 let fPosts= currentSearch ? filteredPosts:viewPosts;

   <Button disabled={!hasPreviousPage} type="button" onClick={()=>{
          Router.push(`/blog/?page=${pageNumber-1}`)
        }}> Prev </Button>
```

But when i implemented pagination , this time searching mechanism broke down.And i modified the **search mechanism** for my needs🔎

I also implemented a **scrollToTop** button component and added to the main page layout component.


```tsx:topScroll.tsx
import { useState,useEffect } from 'react'
import styles from './topscroll.module.scss'
import Button from 'components/button'
import { BiUpArrow } from "react-icons/bi";

const Topscroll=(): JSX.Element=> {

    const [showScroll, setShowScroll] = useState(false)

    const scrollTop = () =>{
        window.scrollTo({top: 0, behavior: 'smooth'});
      };

      useEffect(() => {
        
            const checkScrollTop = () => {
                if (window.pageYOffset > 400) {
                    setShowScroll(true); 
                } else {
                    setShowScroll(false); 
                }
              };
          window.addEventListener('scroll', checkScrollTop)
          return () => window.removeEventListener('scroll', checkScrollTop)
      }, [])
    
    return (
        <div className={showScroll ? styles.active: styles.scrollTopBtn}> 
             <Button  type="button" onClick={scrollTop}> <BiUpArrow/>  </Button>
        </div>
    )     
}

export default Topscroll;

```

<p>Implemented <u>draft-publish system</u>.I tweaked and wrote a lot of Scss to style the views.Actually using <u>style modules</u> is very good experience.By the way , 
In <b>Angular</b> you can write sass in component based too.</p>

***

Finally , the initial version is ready.And i deployed to **Vercel** as you predict.Because , [Vercel](https://vercel.com/) is designed for essentially Next.js projects and very easy to use.I have a lot of experiences with AWS and i can say Vercel is easy peasy comparing to Aws.

<p>This is it.🥳Mission accomplished in 3 days and I grasp the next.js’s main concepts by myself with doing.Because as you now , 
the most effective way of learning is always doing...😎</p>


<p>I’ll write about programming JS , React , Angular , Next.js and other frameworks , my experiences , failures and success’.
And also Webgl.I created some big projects in Webgl and i’ll share my experiences , my snippets and tutorials.Finally as a 3D Designer 
i will share my 3D experiences ,too.</p>

So keep watching here guys…📺

If you have any questions , feel free to contact me...



nextjs