/Toy-NextJS-BloggingTool

Next.js 를 이해하기 위해서 블로그 툴을 만들어 보는 프로젝트(Next.js project, mainly to understand how this framework works and what's happening underhood)

Primary LanguageTypeScript

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

login, logout and signup

  • Visiting User's Blog

user's blog

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

cru

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

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.