반응형 next.js7 [Next.js]차트와 대시보드 예제-홈화면 출처 : 레벨업 리액트 프로그래밍 1. 프로젝트 생성create-next-app@latest levelup-dashboard - 정상 확인cd levelup-dashboardnpm run dev 2. 추가 라이브러리 설치npm i @heroicons/react @tailwindcss/forms @tremor/react @vercel/postgres autoprefixer bcrypt clsx next-auth@beta use-debounce uuid zod -개발용 추가 설치npm i -D @types/bcrypt @types/uuid @vercel/style-guide dotenv eslint-config-prettier prettier prettier-plugin-tailwindcss 3. 파일 수.. 2024. 6. 30. [Next.js] React 복습 및 약간의 실습 - 프로파일 화면 만들기 app/composition/user-detail.tsx 파일 작성'use client';import React from 'react';interface ProfilePictureProps { src: string; }interface ProfileDetailsProps { name: string; email: string; }interface ContactButtonProps { onClick: () => void; }interface UserProfileCardProps { user: { profilePicture: string; name: string; email: string; }; onContactClick: () => void;}const .. 2024. 6. 25. [Next.js]프로젝트 시작 환경구성 vscode plugin 프로젝트 생성은 npx create-next-app@latest 를 이용하며,src/폴더 사용 이외에는 모두 Yes 를 선택합니다. 2024. 6. 24. [TS]Next.js 기초 - SSG 실습을 위해 next.js 프로젝트를 생성한다. npx create-next-app@latest --ts next-sample생성시 질의는 모두 No~~! SSG - Static Site Generation 정적사이트 생성빌드시 페이지를 생성한다. -- 사용 함수export const getStaticProps: GetStaticProps = async(context) =>pages/ssg.tsx 로 파일생성한다.next.js 에서는 폴더/파일 구조로 tsx 파일을 생성하면 그대로 호출 주소가 된다.즉, localhost:3000/ssg 로 호출 하면 이 페이지가 호출된다.import { GetStaticProps, NextPage } from "next";import Head from "next/h.. 2024. 6. 22. Next.js 외부인증 모듈 이용하기 Auth0 외부모듈을 이용한 회원가입/로그인 페이지 만들기 1. 프로젝트 생성npx create-next-app with-auth0모두 No! 2. Auth0 사이트 회원가입 후, 로그인Auth0: Secure access for everyone. But not just anyone. Auth0: Secure access for everyone. But not just anyone.Rapidly integrate authentication and authorization for web, mobile, and legacy applications so you can focus on your core business.auth0.com 3. Auth0 내에서 프로젝트 생성다음 화면에서 Next.js 선택프로젝.. 2024. 6. 6. [Next.js]공식사이트 튜토리얼 따라하기 Learn Next.js | Next.js (nextjs.org) Learn Next.js | Next.jsLearn how to build a full-stack web application with the free, Next.js App Router Course.nextjs.org ** Next.js 는 이런거군 **1. 폴더로 라우팅 설정이 가능하다. 하이레키하게 설정이 된다. 주소와 폴더의 트리구조가 매핑! ( 직관적임)2. 폴더별로 page.tsx layout.tsx 파일을 생성해서 기본 값을 설정할 수 있다. 3. 루트(app/)의 layout.tsx 은 전체에 영향을 끼친다.4. php 를 대체? 하는게 목적이어서, 단순 SSR 뿐만아니라 서버리스 연동으로 마치 서버페이지역할도 한다. ( 예.. 2024. 5. 31. [Next.js] 샘플 프로젝트 시작하기 1. 프로젝트 생성 및 시작npx create-next-app@latest my-next-app # 생각보다 오래걸립니다.cd my-next-app npm run dev 2. 생성시 셋팅 화면처음하는 프로젝트니 추천 말고는 모두 No! 3. 실행화면 4. 간단하게 페이지 수정루트에 pages 폴더를 만들고 about.js 파일을 생성 하여 아래와같이 쓴다.export default function About() { return ( Next.js 시작합니다. )} 5. 테스트 페이지 접속 2024. 5. 30. 이전 1 다음 반응형
