본문 바로가기
반응형

NextJS
3

[Next.js] 중고마켓 앱2 Next Auth 설정하기 Auth 라이브러리 설치 npm install next-auth @prisma/client @next-auth/prisma-adapter npm install prisma --save-dev 기본 설정 코드 생성 PrismaClient 인스턴스 생성을 하여 데이터에 접근한다. prividers로 어떻게 로그인할건지 정한다. (CredentialsProvider... ) src/pages/api/auth/[...nextauth].js : /api/auth로의 API요청을 Next-Auth가 처리 adapter: 데이터를 저장하는데 사용할 데이터베이스 또는 백엔드 시스템에 애플리케이션을 연결 privider : 어떠한 로그인을 사용할 것인지, 기본 로그인 혹은 소셜 로그인 사용(구.. 2024. 2. 1.
[Next.js] 튜토리얼 블로그 메인 페이지 UI 만들기(마크다운 파일 생성) 튜토리얼 블로그 폴더 생성 후 npx create-next-app ./ --typescript 넥스트+타입스크립트 템플릿으로 설치 기본 화면 메인페이지 UI만들기 layout.tsx에서 favicon이나 head안의 데이터를 수정할 수 있다. page.tsx에서는 메인페이지의 UI를 만들 수 있다. md파일안에 포스트 생성하기 블로그 튜토리얼 공식문서 서버가 없기때문에 여기의 블로그 데이터를 md(mark down)파일로 만들어서 사용할것이다. posts 폴더 생성 각 포스트별로 md파일을 만든다. 마크다운 파일을 데이터로 추출하기 markdown 형식의 데이터를 일반 글로 전환하는 함수가 필요. post에 사용할 함수 생성 여러 모듈을 사용하면서 파일 읽고.. 2024. 1. 17.
[Next.js] Next.js 기본 Nextjs 기본 NextJS 란? (리액트는 라이브러리, Next.js는 프레임워크이다. ) React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 간단한 프레임워크이다. 리액트로 개발할때 SPA을 이용하며 CSR(Client Side Rendering)을 하기때문에 좋은점도 있지만 단점도 있다. 검색엔진최적화(SEO)에 취약하다는 것이다. CSR을 하면 첫페이지에서 빈 html을 가져와서 JS파일을 해석하여 화면을 구성하기때문에 포털검색에 거의 논출될 일이 없다.(크롤링 안됨) 하지만 Next.js에서는 Pre-Rendering을 통해서 페이지를 미리 렌더링하며 완성된 HTML을 가져오기 때문에 사용자와 검색엔진 크롤러에게 바로 렌더링된 페이지를 전달 할 수 있게.. 2024. 1. 17.
반응형

최근댓글

최근글

© Copyright 2024 ttutta

티스토리툴바