폴리프레임

NextResponse(JSON.stringify( )) 이 방법은 단순히 JavaScript 객체인 user를 JSON 문자열로 직접 변환한 후, 그 문자열을 응답으로 보냅니다. 서버는 이 문자열을 클라이언트로 보내기 전에 추가적인 처리를 하지 않습니다. 따라서 클라이언트는 이 문자열을 다시 JSON으로 파싱하여 사용해야 합니다. const user = { id: 1, name: 'John' }; return NextResponse(JSON.stringify(user)); NextResponse.json( ): 이 방법은 Next.js에서 제공하는 응답 생성 메소드 중 하나입니다. NextResponse.json() 메소드는 입력받은 JavaScript 객체를 JSON으로 직렬화한 후, 적절한 HTTP..

Next.js 2023. 8. 14. 19:36

Next.JS 안의 App Router는 page, layout, template 을 쉽게 만들 수 있는 규칙을 소개 합니다. 1. Pages 하나의 page는 유일한 UI 입니다. 하나의 page.js 로 부터, 하나의 컴포넌트로, 엑스포트 되어서 page 들이 정의 됩니다. page.js 파일을 설치하여, 공개적으로 접근 할 수 있도록 중첩폴더( Nested folders )를 이용합니다. // app/page.tsx의 URL 경로는 `/` export default function Page() { return Hello, Home page!; } // app/dashboard/page.tsx의 URL 경로는`/dashboard` export default function Page() { return..

Next.js 2023. 6. 5. 17:59

Next.js는 폴더이름으로 경로를 정의하는, 파일 시스템 기반 라우터를 사용합니다. 각 폴더는 URL 세그먼트에 매핑되는 경로 세그먼트를 나타냅니다. 폴더를 서로 중첩하여 중첩된 경로를 만들 수 있습니다. page.js 파일이 있어야 공개적으로 접근이 가능합니다. 아래 파일구조에서는 /dashboard/analytics 는 폴더내에 page.js가 없어서 공개적으로 접근 할 수 없습니다. 파일의 확장자로는 .js, .jsx, or .tsx 들 을 사용할 수 있습니다.

Next.js 2023. 6. 5. 14:59

3. 프로젝트 구성 방법 NextJS 안에서, 자신의 파일과 폴더를 구성하는데 있어서는, 옳고, 틀림은 없습니다. 그러나 다음 사항들은 통상 높은 수준의 점검사항입니다. - 프로젝트 파일들을 app 바같에 위치 : 이 방법은 프로젝트의 루트에 모든 어플리케이션 파일을 위치 시키고, app 디랙토리는 순수하게 라우팅 목적으로만 사용합니다. - 프로젝트 파일들을 app 안쪽에 위치 : 이 방법은 루트인 app 디랙토리안에 전역적으로 공유하는 어플리케이션 코드를 위치 시킵니다. - 프로젝트 파일들을 특징 또는 라우트로 추가 분리 : 이 방법은 루트 app 디랙토리안에 전역적으로 공유되는 어플리케이션을 위치 시키고, 더 구체적으로 어플리케이션 코드를 분리하는 것입니다.

Next.js 2023. 6. 5. 14:43

2, 프로젝트 구성 특징 - Private Folders : _folderName 처럼 파일명 앞에 언더바( _ )를 붙여서 만들며, 이 파일들은 라우팅 시스템에서 접근하지 않는 사적인 폴더들 입니다. - Route Groups : (folderName) 처럼 괄호를 사용하여 만들며, 라우터의 URL path 안에 포함되지 않습니다. - src 디랙토리 : 선택사항인 src 디랙토리 안에서, app 를 포함한 코드작성이 가능합니다. 주로 프로젝트의 루트에 위치합니다. - 모듈 패스 별칭 ( module Path Aliases ) :이 기능은 중첩된 파일 패스가 깊을 때 매우 유용한 기능입니다. 아래코드를 보면 명확하게 간결함이 보입니다. // 이전 버젼 import { Button } from '../...

Next.js 2023. 6. 5. 14:16

NextJS는 라우팅폴더와 파일규칙외에는 프로젝트 파일 구성및 배치에 대하여는 관여하지 않습니다. 여기서는 프로젝트을 구성하는데 이용 할 수 있는 몇가지 기본요소와 특징을 살펴봅니다. 1. 안전한 코로케이션 - app 디랙토리안에, 중첩폴더 형태로 계층 구조를 설계합니다. - 각각의 폴더명은 URL path에서 연결된 하나의 라우터 부문입니다. - 라우터 구조가 폴더명을 통하여 설정되어도, 하나의 page.js 또는 route.js 파일이 없으면 공개적으로 접근 할 수 없습니다. - 라우터가 접근되면, page.js 또는 route.js 파일 전체가 아니고, 내용만 전달되는 것입니다. - 따라서 프로젝트 파일들이 route 부문에 함께 있어도, 노출되지 않고 안전하다는 것입니다. 이 것이 page Dir..

Next.js 2023. 6. 5. 13:52

NextJS는 pages 디렉토리와 app 디랙토리 둘다에서 작동하도록, version 13으로 업그레이드를 권장하고 있으며, 점진적으로 기존의 개발환경은 pages 에서 app 중심으로 바뀌어 갈 것을 예고하고 있습니다. 이후 버젼에서는 pages 디랙토리는 디폴트 환경이 아닙니다. - App Route는 app 이라는 새로운 디랙토리안에서 작동합니다. - App Route는 shared layouts, nested routing, loading states, error handling 등을 지원하는 React Server Components 위에 설계되었으며, 따라서 Server Side Randering이 디폴트입니다. - App Router는 Page Router 보다 우선합니다. ( 이전 버젼의..

Next.js 2023. 6. 5. 12:22

1. ( ) - Route Group - (폴더이름) 형태로 사용 함. - URL path에는 영향을 미치지 않음. - 동일한 유형의 site section, intent, team을 묶을 때 유용함. 2. [ ] - Dynamic Routes - [폴더이름] 형태로 사용 함 ( 폴더이름과 같이 함- [id] 또는 [slug] ) - URL의 파라미터(params)로 넘어오는 동적 데이터를 이용하여 경로를 생성하는 경우 사용합니다. - NextJs에서는 Dynamic Segments라고 하며, params props로 layout, page, route, generateMetadata 함수로 보냅니다. - 추가 이해를 위해 링크를 첨부합니다. https://nextjs.org/docs/app/buildi..

Next.js 2023. 6. 5. 10:41