이젠온라인에듀
프론트엔드 · 웹개발

[26]Next JS 프레임워크 입문 Part1

🌟 최신 웹서비스 개발에 활용되는 Next.js, 설치부터 라우팅·폼 처리·API Route까지 체계적으로 배우고 싶으신가요?
Next.js 프레임워크의 설치와 기본 실행환경 구성부터 App Router, 동적·정적 세그먼트, 쿼리 스트링, Layout, Form 처리, API Route까지 단계적으로 학습하는 입문 과정입니다.
이 과정은 먼저 Next.js를 설치하고 다양한 환경에서 프로젝트를 실행하는 방법을 익힌 뒤,
App Router의 기본 구조와 페이지 경로 처리 방식을 이해하도록 구성되었습니다.
이후 동적 파라미터와 useParams, usePathname, 서치 파라미터를 활용해 URL 정보를 처리하고,
루트 Layout과 하위 Layout의 관계, 서버 컴포넌트에서 동적 세그먼트와 쿼리 스트링을 다루는 방법까지 학습합니다.
후반부에는 Form 데이터를 받아 처리하는 방법을 반복적으로 실습하고,
Next.js의 API Route와 Route Handler를 직접 구성하여 요청을 처리하고 응답 데이터를 출력하는 과정까지 익힙니다.
총 20차시의 단계별 실습을 통해 Next.js의 기본 프로젝트 구조와 라우팅·데이터 처리 흐름을 이해하고,
웹 애플리케이션 제작에 필요한 Next.js 기초 개발 역량을 갖출 수 있습니다.
강의 소개

 

✅ Next JS 프레임워크 입문 Part.1 - 기초 사용법 1~2는 Next.js 설치부터 App Router, URL 파라미터 처리, Layout, Form 및 API Route까지 총 20차시에 걸쳐 학습하는 입문 과정입니다.
기초 사용법 1에서는 Next.js 프레임워크 설치와 프로젝트 실행 방법을 시작으로 App Router의 기본 구조와 사용법을 학습합니다. 이어 async/await, useParams를 활용한 동적 파라미터 처리, 서치 파라미터 처리, 동적 세그먼트 값을 가져오는 방법을 실습합니다.
기초 사용법 2에서는 usePathname 훅을 이용한 정적 세그먼트 처리와 루트 Layout·하위 Layout의 관계를 익히고, 서버 컴포넌트에서 동적 세그먼트와 쿼리 스트링을 함께 처리하는 방법을 학습합니다. 이후 Form 데이터를 비동기로 전달·처리하는 실습을 단계적으로 진행하고, Next API Route와 Route Handler를 직접 만들어 요청을 처리하고 응답 데이터를 출력하는 과정까지 익힙니다.

 

💡 이 과정을 통해 얻는 것
📁 Next.js 설치와 프로젝트 실행환경 구성 능력
📁 App Router 기반 정적·동적 라우팅 구조 이해
📁 useParams·usePathname·서치 파라미터 활용 경험
📁 Layout과 서버 컴포넌트를 활용한 페이지 구조 설계 이해
📁 Form 처리 및 API Route·Route Handler 구현 경험

 

🎓 수강 효과
✔ Next.js 프로젝트의 기본 구조와 실행 흐름 이해
✔ URL 기반 라우팅과 파라미터 처리 능력 향상
✔ App Router를 활용한 페이지 구성 역량 강화
✔ 사용자 입력 데이터를 서버에서 처리하는 기본 흐름 습득
✔ 향후 Next.js 기반 웹서비스 개발 학습을 위한 기초 역량 확보

 

🙋‍♀️ 자주 묻는 질문 (FAQ)
Q. Next.js를 처음 사용해도 수강할 수 있나요?
A. 네! 프레임워크 설치와 프로젝트 실행부터 시작해 App Router와 라우팅 기능을 단계적으로 학습하도록 구성되어 있어 Next.js 입문자도 수강할 수 있습니다.

Q. 어떤 라우팅 기능을 배우나요?
A. App Router를 기반으로 동적 파라미터, 정적·동적 세그먼트, 서치 파라미터, useParams, usePathname 등을 활용하는 방법을 학습합니다.

Q. 서버 기능도 다루나요?
A. 네! 서버 컴포넌트에서 파라미터를 처리하는 방법과 Form 데이터 처리, Next API Route, Route Handler를 직접 구현하는 내용이 포함되어 있습니다.

Q. 별도의 백엔드 프레임워크도 필요한가요?
A. 이 과정에서는 Next.js 자체의 서버 기능과 API Route를 활용하는 방법을 학습하므로, 별도의 백엔드 프레임워크 없이도 기본적인 요청·응답 처리 구조를 익힐 수 있습니다.

학습 목표
✅ Next.js 프레임워크를 설치하고 프로젝트를 생성·실행할 수 있습니다.
✅ App Router의 기본 구조와 정적·동적 라우팅 방식을 이해할 수 있습니다.
✅ useParams, usePathname, 서치 파라미터를 활용하여 URL 정보를 처리할 수 있습니다.
✅ Layout 구조와 서버 컴포넌트에서 동적 세그먼트·쿼리 스트링을 처리할 수 있습니다.
✅ Form 데이터 처리와 API Route·Route Handler를 구성하여 요청과 응답을 처리할 수 있습니다.
교육 대상
✨ Next.js 프레임워크를 처음 배우고 기본 사용법부터 익히고 싶은 학습자
✨ React 기반 웹 개발 경험을 바탕으로 Next.js의 라우팅과 서버 기능을 배우고 싶은 개발 입문자
✨ App Router, Form 처리, API Route 등 실제 웹서비스 제작에 필요한 Next.js 기능을 익히고 싶은 학습자
학습 커리큘럼
  1. Next JS 프레임워크 입문 Part1 - 기초 사용법 1

  2. Next JS 프레임워크 입문 Part1 - 기초 사용법 2

환불 규정
  • 환불시 결제시 사용한 쿠폰은 복구되지 않습니다.
  • 환불금액은 정가가 아닌 실제 결제금액으로 계산됩니다.
  • 수강시작 후 7일 이내, 5강 미만 수강 시에는 100% 환불 가능합니다.
  • 수강시작 후 7일 이내, 5강 이상 수강 시 전체 강의에서 수강한 강의의 비율에 해당하는 수강료를 차감 후 환불 가능합니다.
  • 수강시작 후 7일 초과 시 정상 수강기간 대비 잔여일에 대해 아래 환불규정에 따라 환불 가능합니다.
    환불요청일 시 기준
    • 수강시작 후 1/3 경과 전, 실 결제금액의 2/3에 해당하는 금액 환불
    • 수강시작 후 1/2 경과 전, 실 결제금액의 1/2에 해당하는 금액 환불
    • 수강시작 후 1/2 경과 후, 환불 금액 없음
[26]Next JS 프레임워크 입문 Part1 대표 썸네일 이미지

[26]Next JS 프레임워크 입문 Part1

강의 차시
2차시
총 학습시간
9시간 9분
수강 기간
30 일간 수강
17%
58,000
48,000