반응형 프레임워크/Next.js35 [Next.js] 동적 meta tag 설정하기 Next.js에서 Dynamic Routes를 사용하다 보니 meta tag 설정하는 부분에서 삽질을 너무 많이 했다. 다음에는 이런 일이 없도록 정리해 보았다. 삽질을 하면서 알게 된 것 meta 태그에는 static 한 값만 넣을 수 있다. getServerSideProps는 은근히 까다롭다. fetch는 절대 url을 사용해야 한다. 예제를 찾을 때는 다른 분들이 작성하신 블로그를 꼼꼼하게 읽자 아래 블로그에서 해답을 얻을 수 있었다. (정말.. 이 분이 아니었다면 머리가 다 뜯겼을지도 모른다.) Next.js 다이나믹 메타 태그 넣기 저번 글에 이어서 SEO 작업을 계속 하고 있다. 이번주엔 다이나믹 메타 태그 작업을 했다. (메타태그 종류나, 검색최적화를 위한 추천 등의 내용은 없습니다) htt.. 2023. 4. 10. [Next.js] styled-component 적용하기 Next.js에서 styled-component를 사용할 경우 생기는 문제 : Next.js는 SSR(Server Side Rendering)을 이용하여 페이지를 pre-rendering을 하기 때문에 클라이언트가 서버에 페이지 요청 시 HTML/CSS만 넘겨 받는다. / styled-component는 CSS-in-JS 형식으로써 JS로 작성된 스타일 요소들을 페이지에 주입 시킨다. * pre-rendering이란? : 서버에서 HTML 파일들을 미리 만들어 놓고 클라이언트에서 페이지 요청 시 서버에서 HTML 파일을 넘겨주는 방식 이는 퍼포먼스와 검색 SEO를 향상 시켜준다. pre-render 사전에 HTML파일들을 만든다는의미이는 퍼포먼스와 검색SEO를 향상 시킬 수 있다 리액트로 만든 페이지는개.. 2023. 1. 17. [Next.js] passport 알아보다가 알게된 Next.js... Next.js는 서버 역할을 해준다. 그래서 node.js의 app.js처럼 따로 서버를 만들어 줄 필요가 없다pages/api/#.js를 만들어서 api를 만들 수 있다. → https://localhost:3000/api/# api 요청 시에는 여러가지 방법이 있는 데 일단 파악한 방법들을 정리했다. 1) 컴포넌트에 getStaticProps나 getServerSideProps를 사용하여 api를 fetch하여 받아온 데이터를 return하여 해당 .js의 컴포넌트 props로 받는다. 이때 api url은 절대적 url이여야 한다. 즉, local로 서버를 구동 중이라면 http://localhost:3000/api/hello 이런 식으로 요청을 보낸다. 2) fetch 때도 async/await을.. 2022. 3. 3. [Next.js] 기타 호스팅 옵션 Next.js는 Node.js를 지원하는 모든 호스팅 제공업체에서 배포 할 수 있습니다. package.json의 scripts를 보면 build와 start가 있는 데 { "scripts": { "dev": "next", "build": "next build", "start": "next start" } } 자체 호스팅 제공업체에서 build 스크립트를 한번 실행하면 .next 폴더에 프로덕션 애플리케이션이 빌드 됩니다. npm run build 빌드 후 start 스크립트를 사용하면 하이브리드 페이지를 지원하는 Node.js 서버를 시작하여 정적으로 생성된 페이지와 서버 측 렌더링 페이지와 API 경로를 모두 제공합니다. npm run start 팁 : 아래와 같이 업데이트 하면 start를 허용하도.. 2022. 2. 26. [Next.js] Vercel에 배포 Next.js를 프로덕션에 배포하는 가장 쉬운 방법은 Next.js 제작자가 개발한 Vercel 플랫폼을 사용하는 것입니다. Vercel은 헤드리스 콘텐츠, 상거래 또는 데이터베이스와 통합하도록 구축된 정적 및 하이브리드 애플리케이션을 위한 서버리스 플랫폼입니다. 1. Vercel 계정 생성 Sign Up – Vercel Vercel is the easiest way to deploy websites. Host your web projects for free with zero configuration, automatic SSL, and global CDN. vercel.com 2. nextjs-blog 저장소(repo) 가져오기 가입 후 Vercel에서 repo를 가져 옵니다. 이때 Github용 Ver.. 2022. 2. 26. [Next.js] Github에 Push 배포하기 전에 Next.js 앱을 아직 Push 하지 않은 경우 Github에 Push 해보겠습니다. 이렇게 하면 배포가 더욱 쉬워 집니다. - 개인 Github계정에서 nextjs-blog라는 repo을 생성합니다. - repo는 public(공개) 또는 private(비공개) 할 수 있습니다. README나 다른 파일로 초기화 할 필요가 없습니다. - Next.js 앱에 대해 로컬로 git repo를 초기화 하지 않았다면 초기화 하세요. git init - Next.js 앱을 Github repo에 Push 합니다. (다음 명령어로 Push 할 수 있습니다.) git remote add origin https://github.com//nextjs-blog.git git push -u origin ma.. 2022. 2. 26. [Next.js] API 경로 세부정보 API 경로에 대해서 알아야 할 몇가지 필수 정보를 정리 해보겠습니다. 1. getStaticProps 또는 getStaticPaths에서 API 경로를 가져오지 마십시오. getStaticProps 또는 getStaticPaths에서 API 경로(pages/api/~~)를 가져오면 안됩니다. 대신 getStaticProps 또는 getStaticPaths에 직접 서버 측 코드를 작성하세요. (또는 도우미 함수를 호출 하세요.) 왜냐하면 getStaticProps와 getStaticPaths는 서버 측에서만 실행되고, 클라이언트 측에서는 실행되지 않습니다. 브라우저용 JS 번들에도 포함되지 않습니다. 즉, 직접 데이터베이스 쿼리와 같은 코드를 브라우저로 보내지 않고도 작성 할 수 있습니다. 2. 좋은 사.. 2022. 2. 26. [Next.js] API 경로 생성 API 경로 생성 API 경로를 사용하면 Next.js 앱 내에서 API 엔드포인트를 생성 할 수 있습니다. pages/api 디렉토리 내부에 함수를 생성하여 이를 수행 할 수 있습니다. // req = HTTP incoming message, res = HTTP server response export default function handler(req, res) { // ... } 서버 리스 함수(람다)로 배포 할 수 있습니다. 간단한 API 엔드포인트 생성 pages/api 디렉토리에 hello.js 파일을 생성하고 아래 코드를 삽입합니다. export default function handler(req, res) { res.status(200).json({ text: 'Hello' }) } 그런 .. 2022. 2. 26. [Next.js] 동적 라우팅 사용하기 Next.js에서는 동적 라우팅을 지원하고 있는 데 그 종류와 사용 방법에 대해서 알게 된 내용을 까먹지 않게 정리하면서 다른 블로그도 참고하여 채울 예정이다. 동적 라우팅은 영어로 Dynamic Routing이라고 한다. 크게 3가지 종류가 있는 데 🥕 일반적인 사용([@]) 🥕 Multiple Segment 사용([@]/[@]) 🥕 Catch All Routes로 Optional 하게 사용([[...@]]) 일반적인 사용 ([@]) 1️⃣ 예시 1 - pages/[test].js 파일을 생성 시 url에서는 /orange, /strawberry로 접근 가능할 수 있다. import { useEffect, useState } from "react"; import { useRouter } from "n.. 2022. 2. 22. 이전 1 2 3 4 다음 반응형
