What I Learned from Building My First Next.js Blog

In this project, I learned how Next.js works with pages, dynamic routes, static generation, Markdown files, and reusable components.

This blog project helped me understand the basic structure of a Next.js application and how different parts of the project work together.

Pages and routing

I learned that in Next.js, files inside the pages folder automatically become routes.

For example, the index.js file creates the home page, and the dynamic file [id].js is used to generate individual blog post pages.

This helped me understand how routing works without manually installing and configuring React Router.

Dynamic routes

One of the most important things I practiced was dynamic routing.

In this project, each Markdown file becomes a separate blog post page. The route depends on the post id, so the project can generate pages like:

/posts/learning-nextjs /posts/react-components /posts/why-i-learn-frontend

This helped me understand how Next.js can create pages based on data.

Static generation

I also learned how static generation works in Next.js.

The project uses functions like getStaticPaths and getStaticProps to prepare blog pages before they are displayed in the browser.

This was useful for understanding how Next.js can generate fast static pages from local data.

Markdown posts

In this project, I used Markdown files to store blog content.

Each post has front matter with a title and date. Then the content is written in Markdown.

This helped me understand how blog systems can separate content from page layout.

Reusable components

I practiced working with reusable components such as Layout and Date.

The Layout component is used to create a common page structure, including the header, main content area, and link back to the home page.

The Date component is used to format post dates in a cleaner way.

CSS Modules

I also practiced using CSS Modules.

CSS Modules helped me understand how to write component-specific styles without creating conflicts between class names.

For example, styles from layout.module.css are used only for the layout component, while utility styles are stored in utils.module.css.

Project structure

This project helped me better understand how to organize files in a Next.js application.

I worked with folders such as:

• pages
• components
• styles
• lib
• posts
• public

Each folder has its own purpose, and this makes the project easier to read and maintain.

What I fixed and improved

While working on this project, I also practiced fixing real project issues.

I fixed import problems, corrected file names, updated dependencies, improved CSS classes, changed test content, and customized the blog for my own learning portfolio.

I also learned why it is important to keep package.json and package-lock.json in the project when using npm.

Conclusion

This project was a useful step in learning Next.js.

It helped me understand routing, dynamic pages, static generation, Markdown content, reusable components, CSS Modules, and basic project structure.

I plan to continue improving this blog by adding better styling, responsive design, real content, and deployment to Vercel.