nextjs튜토리얼
-
[NextJS] 튜토리얼 챕터 17 - 다음 과정Web 2024. 6. 7. 17:30
들어가기 전에이 글은 Next.js - Chapter 17 : Next Steps 강의를 번역한 글입니다.다음 과정 그리고 번역자의 말축하합니다! Next.js의 주요 기능과 좋은 방법들을 배울 수 있었던 Next.js의 대시보드 코스를 끝마쳤습니다.하지만 이건 겨우 시작입니다. 작은 사이드 프로젝트를 만드는 것부터, 스타트업 아이디어의 구현, 그리고 팀과 함께 만들 커다란 규모의 어플리케이션까지 Next.js는 이러한 구현을 위한 수많은 기능을 가지고 있습니다.여기 Next.js에 대해 더 알아볼 문서들이 있습니다.Next.js 문서Next.js 탬플릿어드민 대시보드 탬플릿Next.js 커머스블로그 스타터 도구Nextra: 문서 생성 도구이미지 갤러리 스타터Next.js 깃 저장소Vercel 유튜브Ne..
-
[NextJS] 튜토리얼 챕터 5 - 페이지간 이동Web 2024. 5. 23. 21:12
들어가기 전에이 글은 Next.js - Chapter 5 : Navigating Between Pages강의를 번역한 글입니다.페이지간 이동이전 챕터에서, 대시보드 레이아웃과 페이지들을 만들었습니다. 이제 유저가 대시보드 라우트간 이동을 할 수 있도록 링크를 추가해봅시다.이번 챕터에서...여기 우리가 다룰 주제들이 있습니다.next/link를 사용하는 방법usePathname() 후크로 액티브 링크를 생성하는 방법Next.js에서 내비게이션이 동작하는 원리왜 내비게이션을 최적화 하나요?페이지간 링크를 생성하기 위해서, 우리는 전통적인 방법인 HTML 태그를 사용해 왔습니다. 사이드바 링크는 태그를 사용하고, 브라우저에서 home, invoices 그리고 customer페이지간 이동을 할 때 어떤일이 일..
-
[NextJS] 튜토리얼 챕터 4 - 레이아웃과 페이지 생성Web 2024. 5. 21. 08:27
들어가기 전에이 글은 Next.js - Chapter 4 : Creating Layouts and Pages를 번역한 글입니다.레이아웃과 페이지 생성지금까지 만든 어플리케이션은 오직 홈페이지만 가지고 있습니다. 이제 페이지와 레이아웃을 이용해 더 많은 라우트를 생성하는 방법을 배워봅시다.이번 챕터에서...여기 우리가 다룰 주제들이 있습니다.파일시스템 라우팅 방법을 사용해 대시보드 라우트를 만들겁니다.새로운 라우트 경로를 만들때 폴더와 파일의 역할을 이해합니다.여러 대시보드 페이지 간에 공통 사용될 중첩된 레이아웃을 생성합니다.같이 있기(colocation), 부분 렌더링, 루트(root) 레이아웃을 이해합니다.중첩 라우팅Next.js는 폴더들로 라우트를 생성하는 파일 시스템 라우팅을 사용합니다. 각 폴더..
-
[NextJS] 튜토리얼 챕터 1 - 시작하기Web 2024. 5. 13. 21:09
들어가기 전에이 글은 Next.js 튜토리얼을 번역한 글입니다.그리고 앞의 글 [NextJS] 튜토리얼 Intro - Next.js 배우기에서 이어지는 글입니다.만약 Next.js를 위한 기본 셋업이 안 되어있다면, 위 링크를 눌러 기본 셋업을 해주세요.시작하기신규 프로젝트 생성하기Next.js 어플리케이션을 생성하기 위해, terminal을 열고 cd명령어로 프로젝트를 생성하고 싶은곳으로 이동하세요.그리고 다음 명령어를 실행하세요.Terminalnpx create-next-app@latest nextjs-dashboard --use-npm --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example"위 명령어는 N..