Skip to main content

5 posts tagged with "nextjs"

View All Tags

· One min read
  • Deployment
    • vercel에 serverless 형태로 배포하는걸 추천
    • 일반 서버에 배포하려면 nodejs project로 인식해서 npm run start 사용
    • static html export하려면 npm run export 사용
  • Static HTML Export
    • package.json에서 scripts.build에 next export 추가: "build": "next build && next export"

· 2 min read
  • https://nextjs.org/docs/getting-started
  • create-next-app CLI
    • 요즘은 CLI 설치 않고 npx 사용한다
    • npx create-next-app next-oauth-101
    • 바로 실행 가능 cd next-oauth-101; npm run dev
      • 3000번 포트에 뭔가 간단한 UI가 나온다
      • 이 상태로 소스를 수정하면 바로 반영된다
  • next.js/examples 아래서 필요한 기능을 찾는다.
  • Adding Authentication to an existing serverless Next.js App in no time with NextAuth.js!
    • nextjs application이 있는데 user/authentication을 추가하고 싶은가? NextAuth.js를 추가하면 끝이다
    • 일단 OAuth provider로 Google예로들자
      • GCP Console에서 project를 만든다
      • API's & Service -> Credentials -> Create credentials -> OAuth Client ID
      • User type은 external 밖에 못 고른다
        • Internal: Google Workspace 사용자 대상
        • External: App이 production에 push되고 verify되어야 함. 그 전까진 등록된 test user만 사용가능
      • OAuth client ID / Secret을 만들었다. JSON Download가 되는데 이걸 분실하면 안되는건가? -> 아니다. 콘솔에서 보이네
    • npm install next-auth
      • 이 글에선 .env를 사용한다
      • .env.production, .env.development 등을 사용하라는데 이것들은 git에 올리지 않아야겠지?
    • Dynamic API Routes는 그냥 API Routes와 다르다
      • 어쩐지 react관련 오류가 나더라
    • http://localhost:3000/api/auth/a/b/c에 대해 req.query를 출력해 보면 { nextauth: [ 'a', 'b', 'c' ] } 이 나온다
    • https://github.com/nextauthjs/next-auth-example 이걸 보면 dotenv를 읽어들이는 부분이 없다. nextjs에 내장된 기능이다

· One min read
  • https://nextjs.org/docs/basic-features/environment-variables
    • 환경변수는 .env.local를 읽어오게 되어있다
    • 변수명가 NEXT_PUBLIC_ 으로 시작하면 browser에서도 읽을 수 있게 제공된다
    • 중요:Default environment variables
      • .env.local: 최고의 우선순위. 모든걸 override한다. git에 올리면 안된다 (.gitignore에 추가되어야 한다)
      • .env.development, .env.production: development용(next dev), production용(next start) default values. git에 올린다
      • .env: 모든 환경을 커버하는 default values. git에 올린다.

· 2 min read
  • Pages
    • nextjs에서 page는
      • React component이다
      • pages 디렉토리에 존재하는 소스파일명으로 자동 route 설정됨
        • pages/about.js를 만들면 browser에서 /about 이란 경로로 접근된다
        function About() {
    return <div>About</div>
}
export default About
        • pages/posts/[id].js - path parameter도 지원한다
          • 파일명에 [, ]가 들어가는게 생소하지만 된다
    • Pre-rendering
      • 기본적으로 nextjs에선 모든 페이지를 pre-render한다
        • 성능과 SEO 측면에서 좋다
      • 생성된 html은 최소한의 javascript 코드를 담고있다. 브라우져가 로드하고 javascript가 수행되면 fully interactive해 진다(그 전에도 보이긴 함)
        • hydration 과정이라고 칭함
      • 2가지 방식의 pre-rendering
        • Static Generation(추천)
          • build time(by next build)에 html을 생성해 버린다
          • 즉, 매 요청마다 서버에서 뭔가 처리하지 못한다
          • headless CMS나 headful CMS에서 내용을 기반으로 static page 구축
          • getStaticProps, getStaticPaths 사용
        • Server-side Rendering
          • 요청마다 서버에서 작업 결과를 넘겨준다
          • getServerSideProps를 정의하면 된다
      • 대부분의 page는 static generation을 사용하고 불가피한 page만 server-side rendering을 수행하게 만들수 있고 추천한다