{"id":21493279,"url":"https://github.com/clzzi/nextstudy","last_synced_at":"2026-04-17T02:32:10.719Z","repository":{"id":129723119,"uuid":"391916865","full_name":"Clzzi/NextStudy","owner":"Clzzi","description":"🧨 Next JS에 대해서 공부한 소스코드 및 내용을 올리는 곳","archived":false,"fork":false,"pushed_at":"2021-08-06T00:40:16.000Z","size":432,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-03T01:24:54.754Z","etag":null,"topics":["nextjs","recoil","ts"],"latest_commit_sha":null,"homepage":"https://next-study-nine.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Clzzi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-02T11:06:56.000Z","updated_at":"2023-07-04T09:12:19.000Z","dependencies_parsed_at":"2023-04-27T20:46:59.638Z","dependency_job_id":null,"html_url":"https://github.com/Clzzi/NextStudy","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Clzzi/NextStudy","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Clzzi%2FNextStudy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Clzzi%2FNextStudy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Clzzi%2FNextStudy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Clzzi%2FNextStudy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Clzzi","download_url":"https://codeload.github.com/Clzzi/NextStudy/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Clzzi%2FNextStudy/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31912373,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T18:22:33.417Z","status":"online","status_checked_at":"2026-04-17T02:00:06.879Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","recoil","ts"],"created_at":"2024-11-23T15:41:18.067Z","updated_at":"2026-04-17T02:32:10.689Z","avatar_url":"https://github.com/Clzzi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### 🧨 Next JS에 대해서 공부한 소스코드 및 내용을 올리는 곳\n\n### NEXT JS의 장점 및 기능\n- **Hot Reloading** | 개발 중 저장되는 코드는 자동으로 반영됨\n- **Automatic Routing** | pages폴더 안에 있는 폴더 및 파일은 해당 이름으로 라우팅 된다.  \nEx) pages/postFolder/post1.tsx -\u003e localhost:3000/postFolder/post1\n- **Tags** | Next에서 제공해주는 Image나 Link 태그등을 통해 UX를 좋게할 수 있다.\n- **Pre-Rendering** | Next의 핵심 기능, SSG 및 SSR를 파일 단위로 사용할 수 있음.\n- **SEO** | SSR 및 SSG를 지원함으로써 SEO를 최적화 할 수 있음.\n- **CNA** | CRA처럼 Create-next-app으로 빠른 babel및 webpack설정을 할 수 있음.\n- **Styling** | 내장 SASS/CSS 지원, CSS-in-JS lib 모두 지원\n- **배포** | 배포하기가 쉬움\n- **CORS** | Data를 가져오는쪽에서의 CORS문제는 SSR을 사용하여 해결할 수 있음\n- **TypeScript** | TypeScript를 잘 지원해줌, 적용하기 쉬움\n- **Code Spliting** | 일반적인 React 페이지 에서는 초기 렌더링 때 모든 컴포넌트를 내려받게 됨, 그래서 프로젝트의 규모가 커지고 용량이 커지면 초기 로딩속도가 지연될 수 밖에없음. \nNext에서는 이런 문제를 개선해서 필요에 따라 파일을 불러올 수 있게 여러 개의 파일을 분리하는 Code Spliting을 자동으로 해줌.\n\n### NEXT JS의 단점\n- **Learning Curve** | 상대적으로 강의 및 자료들이 많은 React, 상태관리 기술들을 공부하고온 나로써는 영어로된 docs 및 적은 자료들을 공부하고 익히기엔 좀 힘들었다.\n- **Custom** | 이건 장점이자 단점임, next.config.js, custom server등 커스텀할 부분이 생김\n- 다른건 딱히 없는듯.\n\n### 특징\n- **getStaticProps** | ```Fetch data at build time, pre-render for Static Generation```라고 Docs에 나와있는데 서버에서 값을 가져올 때 빌드시 값이 고정되고 빌드후에는 서버의 값이 변경되어도 반영되지 않음,이것은 여러 옵션들로 해결할 수 있음   \n (static한 data들을 위한 data fetching시 사용권장), 옵션들 및 자세한 내용은 [여기](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) 에서 알아볼 수 있음\n- **getServerSideProps** | ```Fetch data on each request. pre-render for Server-side Rendering```라고 Docs에 나와있는데 **getStaticProps**와는 다르게 빌드와 상관없이, 매 요청마다 데이터를 서버로부터 가져옴.     \n(ssr을 위한 data fetching시 사용권장) 자세한 내용은 [여기](https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering)에서 확인할 수 있음\n- 즉 **getStaticProps** 와 **getServerSideProps**의 차이는 빌드이후에 data변경이 가능한지의 여부임.   \n(이것마저도 **getStaticProps**의 특정옵션으로 해결가능하긴함)\n- **getStaticPaths** | ```Specify Dynamic Routes to Pre-Render pages based on Data```라고 Docs에 나와있음, 빌드시에 특정 동적 경로를 지정하여 사전 렌더할 수 있는 기능임, 빌드시 특정 페이지만 먼저 다운받아놓는 느낌\n\n### 배포 및 토이프로젝트로 만든 웹\n1학기 기말고사전 잠깐 ```Recoil``` \u0026 ```MobX``` \u0026 ```JS``` 스택으로 만든 코로나 통계 웹 사이트가 생각나서 이번 기회에 다시 만들어보자고 생각해서 ```NEXT``` \u0026 ```TS``` \u0026 ```Recoil``` 스택으로 다시 만들어 보았다. Figma로 디자인도 조금씩 해서 만든거라서 생각보다 나 치고는 퀄리티가 잘 나온것같다! NEXT만의 장점을 잘 맛볼 수있는 프로젝트였던것같고 \n배포는 vercel 사이트로 하였는데 github 레포지토리와 연동하여 배포하니 자동으로 해주었다. 배포과정에서 Link태그를 import해오는데 경로를 ```next/Link```로 대문자를 넣었더니 오류가 났다. 이걸보는사람들은 꼭 소문자를 넣어서 어이없게 실패하지 말자..\n![Main](https://user-images.githubusercontent.com/62810965/128438611-5c927a73-394a-4c5c-87bc-afec84bc6b0b.png)\n![Country](https://user-images.githubusercontent.com/62810965/128438625-20bbffc6-31ea-4cba-b74f-cd24733fd856.png)\n\n### 느낀점\nReact및 상태관리를 어느정도 다룰 수 있게 되고나서 NEXT를 공부하기 시작했는데 영어로된 Docs나 상대적으로 적은 자료들로 공부하는게 쉽지 않았다. 영어 공부를 더 해야겠다고 느꼈고 아직 공식문서를 잘 보지못한다고 생각했다.\n맨 처음 공부하기 시작했을 때는 파일구조나 상태관리 및 데이터 통신에 대한 흐름을 이해하기 어려워서 힘들었으나,\n다른사람들의 깃허브 레포지토리와 친구들의 조언으로 수월해진것 같다.\n또 SSR을하기위해서 많이 공부해야하는줄 알았으나 React와 상태관리를 어느정도 다룰 수 있으면 NEXT의 덕분인지 구현하는것이 꽤 쉬웠다.\n앞으로 블로그등 SSR이 필요한 사이트가 있으면 NEXT를 이용해서 만들어 볼것같다.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclzzi%2Fnextstudy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclzzi%2Fnextstudy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclzzi%2Fnextstudy/lists"}