{"id":24969247,"url":"https://github.com/eunnbi/nextjs-practice","last_synced_at":"2026-04-12T09:43:57.874Z","repository":{"id":37042748,"uuid":"502877428","full_name":"eunnbi/nextjs-practice","owner":"eunnbi","description":"✏️ NextJS Study","archived":false,"fork":false,"pushed_at":"2024-01-05T13:46:04.000Z","size":244,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-29T04:47:25.866Z","etag":null,"topics":["nextjs","react-query","typescript","vercel"],"latest_commit_sha":null,"homepage":"https://nextjs-practice-eunnbi.vercel.app/","language":"TypeScript","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/eunnbi.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":"2022-06-13T08:50:49.000Z","updated_at":"2022-11-14T08:05:13.000Z","dependencies_parsed_at":"2025-02-03T14:38:25.441Z","dependency_job_id":"d3851a5e-211b-41a4-95c8-4511836b1642","html_url":"https://github.com/eunnbi/nextjs-practice","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/eunnbi/nextjs-practice","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eunnbi%2Fnextjs-practice","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eunnbi%2Fnextjs-practice/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eunnbi%2Fnextjs-practice/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eunnbi%2Fnextjs-practice/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eunnbi","download_url":"https://codeload.github.com/eunnbi/nextjs-practice/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eunnbi%2Fnextjs-practice/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264697567,"owners_count":23650955,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","react-query","typescript","vercel"],"created_at":"2025-02-03T14:36:37.146Z","updated_at":"2026-04-12T09:43:52.838Z","avatar_url":"https://github.com/eunnbi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ✏️ NextJS Study\n\nNextJS를 공부하며 간단한 영화 정보 애플리케이션🎬 을 만들었습니다.\n\n\u003cbr/\u003e\n\n## 📚 Study 내용\n\n### App component 커스텀\n\n- 공통 레이아웃 컴포넌트를 만들어 \\_app.tsx에 렌더링\n\u003e [💅 Custom App](https://www.eunnbi.dev/posts/next-custom-app)\n\n\u003e [🗺️ Layout Component](https://www.eunnbi.dev/posts/next-layout-head#layout)\n\n### 페이지마다 html title 변경\n\n\u003e [🧠 Head Component](https://www.eunnbi.dev/posts/next-layout-head#head)\n\n### NextJS의 Routing\n\n- 🚗 automatic routing\n- 💥 Dynamic Routes 적용\n- 🌐 Catch All Routes 적용: `pages/movies/[...params].tsx`\n- 🚧 404 page 커스텀\n\n\u003e [Next.js Routing](https://www.eunnbi.dev/posts/next-routing)\n\n### Rewrites 적용\n\n- API_KEY를 외부에 노출되지 않기 위해 next.config.js에서 rewrites 설정\n- source 경로가 destination 경로로 매핑이 되어 destination 경로를 source 경로로 mask할 수 있다.\n- URL 프록시 역할을 한다.\n\n\u003e [next.config.js](https://github.com/eunnbi/nextjs-practice/blob/main/next.config.js#L6)\n\n\u003e [Redirects \u0026 Rewrites](https://www.eunnbi.dev/posts/next-redirects-rewrites)\n\n### getServerSideProps 함수 이용\n\n- 페이지를 request할 때마다 getServerSideProps 함수를 실행하여 데이터를 fetch한다. fetch한 데이터를 반환하고 이 데이터를 이용해 페이지를 pre-render한다.\n  - [💻 date fetching code example](https://github.com/eunnbi/nextjs-practice/blob/main/pages/index.tsx#L15)\n- getServerSideProps함수 인자로 Context Parameter가 들어온다. 이를 이용해 params와 query 데이터를 반환하여 페이지를 pre-render할 때 포함시킨다.\n  - [💻 context parameter code example](https://github.com/eunnbi/nextjs-practice/blob/main/pages/movies/%5B...params%5D.tsx#L34)\n  \n\u003e [✨ getServerSideProps](https://www.eunnbi.dev/posts/next-getServerSideProps)\n\n\u003e  [👍 NextJS의 pre-rendering](https://www.eunnbi.dev/posts/next-pre-rendering)\n\n### styled-components와 함께 사용하기\n\n- html 파일에 CSS-in-JS 형식으로 작성된 스타일 요소를 미리 주입하여 스타일이 적용되지 않은 html 코드가 먼저 렌더링되는 문제 해결\n  - [pages/\\_document.tsx](https://github.com/eunnbi/nextjs-practice/blob/main/pages/_document.tsx#L1)\n- server와 client에서 생성하는 class 해시값이 충돌하는 문제 해결\n  - ~~.babelrc~~ =\u003e `babel` 대신 `swc` 사용 (2022년 12월 26일)\n\n\u003e [💅 styled-components와 함께 사용하기](https://www.eunnbi.dev/posts/next-styled-components)\n\n\u003e   [🖤 Next.js Compiler](https://www.eunnbi.dev/posts/next-compiler)\n\n### img 태그 대신 Image 컴포넌트 사용하기\n\n\u003e [🖼️ 이미지 최적화](https://www.eunnbi.dev/posts/next-image): 왜 img 태그 대신 Image 컴포넌트를 사용했는지, Image 컴포넌트의 장점과 사용법에 대해 정리\n\n### React Query 이용하여 Server-side Rendering하기\n\n\u003e [🌺 NextJS + React Query (with SSR)](https://www.eunnbi.dev/posts/next-react-query)\n\n  \u003cbr/\u003e\n\n## 🛠️ Tech Stack\n\n\u003cimg alt=\"TypeScript\" src =\"https://img.shields.io/badge/TypeScript-3178C6.svg?\u0026style=flat-square\u0026logo=TypeScript\u0026logoColor=white\"/\u003e \u003cimg alt=\"NextJS\" src =\"https://img.shields.io/badge/NextJS-000000.svg?\u0026style=flat-square\u0026logo=Next.js\u0026logoColor=white\"/\u003e\n\u003cimg alt=\"React Query\" src =\"https://img.shields.io/badge/React Query-FF4154.svg?\u0026style=flat-square\u0026logo=React Query\u0026logoColor=white\"/\u003e\n\u003cimg alt=\"Styled Components\" src =\"https://img.shields.io/badge/Styled Components-DB7093.svg?\u0026style=flat-square\u0026logo=styled-components\u0026logoColor=white\"/\u003e\n\u003cimg alt=\"Sass\" src =\"https://img.shields.io/badge/Sass-CC6699.svg?\u0026style=flat-square\u0026logo=Sass\u0026logoColor=white\"/\u003e\n\u003cimg alt=\"Vercel\" src =\"https://img.shields.io/badge/Vercel-000000.svg?\u0026style=flat-square\u0026logo=Vercel\u0026logoColor=white\"/\u003e\n\n\u003cbr/\u003e\n\n\u003e [Next.js App을 Vercel에 deploy하기](https://nextjs.org/learn/basics/deploying-nextjs-app/setup)\u003cbr/\u003e\n\u003e\n\u003e 🐛 bug issues\n\u003e\n\u003e - [🚧 배포 사이트 error 발생 (absolute url)](https://github.com/eunnbi/nextjs-practice/issues/1)\n\u003e - [🌍 vercel 배포 프로젝트에 환경변수 넣기](https://github.com/eunnbi/nextjs-practice/issues/2)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feunnbi%2Fnextjs-practice","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feunnbi%2Fnextjs-practice","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feunnbi%2Fnextjs-practice/lists"}