Toy-NextJS-BloggingTool(v1)

The main goal of the Toy-NextJS-BloggingTool project is to learn how Next.js works, especially how Server-Side Rendering, Incremental Static Generation, Static Generation, Client-Side Rendering work all together in this framework. I was inspired a lot by Velog project.

• visit Next.js to find more about this framework.

• also, in this project I'm using my custom react component package, hayoung-markdown. Please check this package.

Overview

• Login, Logout and SignUp

• Visiting User's Blog

• Article Create and Update, Warning when leaving article editing page

Project stack

• Next.js
• Typescript

Run on your machine and customize it as you wish

You can run my project as develop mode following the commands below.

// run this next.js app
git clone 'this project'
npm install
npm run build
npm run start

// when you have to update hayong-markdown package
npm install hayoung-markdown@latest // this is my markdown package

How I developed this website

1. Deriving features

   • [toy blog service] Next.js 기반 서비스 기능 도출 과정
     • What I want to gain from this project are these three things
       1. Learning how to do CRUD using Next.js with an understanding of Server-Side Rendering, Incremental Static Generation, Static Generation, Client-Side Rendering
       2. Learning how to make my simple package by building Markdown Viewer Package and applying it to this project
       3. Building APIs

2. Page

   1. [toy blog service] Next.js의 Pages 이해하기(간단한 Typescript설정)
      • In this post, I wrote things that I learned mainly about Pages and Routing
   2. [toy blog service] 각페이지를 어떻게 렌더링할지...
   3. [toy blog service] Intro Page와 Index 페이지를 통해서 살펴보는 Static Generation과 Incremental Static Regeneration차이
   4. [toy blog service] Dynamic route를 가진 페이지에서 getStaticProps를 하려면 getStaticPaths가 필요하다!
   5. [toy blog service] Preview Mode 이해하기
   6. [toy blog service] getServerSideProps 이용하기

3. Making package & Learning Webpack

   1. [toy blog service] Webpack, TypeScript와 React(Babel은 천천히!)
   2. [toy blog service] React Component를 Package화 하기(hayoung-markdown)

4. APIs with

   • [toy blog service] Next.js의 API와 json

Main features

• Flash message that disappears after given time duration

• Window.confirm feature when changing routes from write page

• Applied debounce to buttons in setting menu

• Login, logout, signout prototyping using localStorage

• Apis with custom functions using fs modules

and more

License

This is released under the MIT license. See LICENSE for details.