메로그

SEO 최적화를 위해서는 robots.txt, sitemap.xml 을 생성해주어야 합니다.robots.txt 는 사이트에 크롤링을 할 대상을 알려주는 파일입니다.sitemap.xml 은 검색엔진에 색인할 모든 페이지를 나열한 XML 파일입니다. robots.txt 만들기Nextjs 14 에서는 app/robots.ts 파일을 만들면 됩니다. 그러면 ts 파일이 txt 파일로 만들어져 /robots.txt 로 접근이 가능해집니다.import { MetadataRoute } from 'next' export default function robots(): MetadataRoute.Robots { return { rules: { userAgent: '*', allow: '/', ..

.env.local 을 일반적으로 사용하지만, 해당 파일은 무시되도록 되어 있어 .gitignore 에 설정하시면 됩니다. 우리는 .env.develpoment, .env.production 을 사용할려고 왔으니 사용해보자. .env.develpoment - 개발 환경에서 사용되는 환경 변수 - next dev 를 실행할 때 실행됩니다. - 개발 환경에서 사용할 키, API 엔드포인트 등을 설정해줍시다. .env.production - 프로덕션 환경에서 사용되는 환경 변수 - next start, build 에 실행됩니다. - 상용 환경에서 사용할 키, API 엔드포인트 등을 설정해줍시다. 서버, 클라이언트 사용방법 - 기본적으로 서버 측에서 사용시에는 환경 변수에 별도 접두사 없이 사용하시면 됩니다. ..

웹 개발에서 메타 데이터는 매우 중요합니다.메타 데이터는 SEO 향상, 사용자 경험 개선 등 아주 도움이 되므로 매우 중요합니다.메타 데이터를 정적, 동적으로 설정하는 방법을 알아봅시다! 정적 설정layout.tsx, page.tsx 에서 아래와 같이 셋팅하면 정적으로 셋팅할 수 있습니다.import { Metadata } from 'next' // 정적 메타 데이터export const metadata: Metadata = { title: 'Hello world',} 만약에 자바스크립트를 사용하고 계신다면, metadata 만 export 해주면 됩니다.export const metadata = { title: 'hello world',} 동적 설정동적 설정 또한 layout, page 에서 할 수..

AWS Elastic Beanstalk 은 코드만 올리면 알아서 npm install, npm run start, 도메인 연결 등을 자동으로 해줍니다.버전 관리도 해주며, 신경 쓸거는 코드를 업로드하는 것만 신경써주면 됩니다.IAM 생성배포할라면 IAM 을 무조건 만들어줘야 합니다. 배포할라면 무조건 만들어줘야하니 그냥 일단 만들어봅시다.IAM 을 검색해서 역할 > 역할 생성을 눌러줍니다. 1단계 - 신뢰할 수 있는 엔티티: AWS 서비스, 사용사례는 EC22단계 - 권한 추가에서 다음 3개를 추가해줍시다. (AWSElasticBeanstalkWebTier, AWSElasticBeanstalkWorkerTier, AWSElasticBeanstalkMulticontainerDocker) 3단계 - 의미있는..

서버 중간에 간섭하고 싶은 경우, Middleware 를 사용하시면 됩니다. 요청, 응답 사이에 간섭하는 것을 middleware 라고 부릅니다. import { NextResponse } from 'next/server' export async function middleware(request) { console.log(request.nextUrl) // 유저가 요청중인 URL console.log(request.cookies) // 유저가 보낸 쿠키 console.log(request.headers) // 유저의 headers 정보 NextResponse.next() // 통과 // NextResponse.redirect() // 다른페이지 이동 // NextResponse.rewrite() // 다..

next-auth 를 이용하여 간단한 소셜로그인을 만들어보자. 우선 가장 쉽게 할 수 있는 깃허브 로그인을 해보자. 깃허브 oauth 셋팅 developer Settings 에 가서 oAuth Apps 를 하나 만들어줍니다. 위에 대로 이러쿵 저러쿵 해서 만들어주면 됨. callback URL 은 callback 주고 싶은대로 아무대나 입력하시면 됩니다. 만들게 되면 client id 가 나와있고 밑에 Generate a new client secret 이라는데가 있는데, 누르면 키가 만들어집니다. 해당 id, secrets key 를 잘 보관해둡시다. 앞으로 로그인시 사용할 아이들(id, pw 라고 생각하면 됨). Next-auth 설치 yarn add next-auth 설치되었다면, page/api/..