next.js 3

Next.js 프로젝트 기본 셋팅

1. 프로젝트를 생성합니다.npx create-next-app@latest 2. 다음과 같이 설정합니다.What is your project named? my-appWould you like to use TypeScript? YesWould you like to use ESLint? YesWould you like to use Tailwind CSS? YesWould you like to use `src/` directory? YesWould you like to use App Router? (recommended) YesWould you like to customize the default import alias (@/*)? Yes 3. 기본 라이브러리를 설치해 줍니다.npm i 4. 실행하여 ..

Next.js에서 IdentityServer 연결 with oidc-client

Identity서버를 연결하기 위해 가장 기본인 oidc-client를 이용한 접속을 시도해 보겠습니다. (1) 먼저 Next.js 프로젝트를 생성해 주세요. npx create-next-app testapp (2) oidc-client 를 설치해 줍니다. npm install oidc-client (3) root에 위치한 page.tsx 에 내용을 다음과 같이 작성해 줍니다. "use client" import { OidcClient,UserManager } from "oidc-client"; export default function Home() { var config = { authority: "https://localhost:5100", client_id: "RoslynDevJS", redirec..

Next.js 최초 설치

Next.js 프로젝트를 셋팅하기 위해서는 기본적으로 Node.js, NPM 등이 설치되어 있어야 합니다. (1) create-next-app의 최신 버전을 설치해 줍니다. npm install create-next-app@latest -g (2) npx를 이용해 create-next-app를 실행합니다. (앱폴더가 자동으로 생성됩니다.) npx create-next-app testapp (3) 실행하면 설치에 관련된 요소들에 대해 질문하며, 적절히 답변하면 Next.js가 생성됩니다. (4) 이제 code . 으로 생성된 프로젝트를 vs code에서 확인할 수 있습니다. code .

반응형