June 12, 2022

Before you learn more advanced Next.js features, it would be helpful to understand the basics of how Next.js works.

좀 더 상급의 Next.js 피쳐에 대해 공부하기 전에, Next.js가 어떻게 동작하는지 기본을 이해하면 더 도움이 될 것이다.

At the beginning of this course, we talked about how React is relatively unopinionated about how you build and structure your applications - there are multiple ways to build applications with React. Next.js provides a framework to structure your application, and optimizations that help make both the development process and final application faster.

강좌 초반에 리액트가 어플리케이션을 빌드하고 구조화하는데 있어서 얼마나 상대적으로 자율성이 있는지에 대해서 얘기했었다 (리액트로 어플리케이션을 구축하는데 정말 여러가지 방법이 존재한다.) Next.js는 어플리케이션을 구조화할 때 필요한 프레임워크와 개발 과정 및 최종 어플리케이션 결과물을 더 빠르게 만드는데 도움을 주는 최적화 등을 제공한다.

In the next sections, we’ll look at what happens to your application code during these different stages:

• The environment where your code runs: Development vs. Production
• When your code runs: Build Time vs. Runtime
• Where rendering happens: Client vs. Server

Now let’s dive deeper into these concepts and discuss some of the processes Next.js is doing behind the scenes.

다음 섹션에서는, 아래의 단계들에서 어플리케이션 코드에 어떤 일이 발생하는지 살펴볼 것이다.

• 여러분의 코드가 어느 환경에서(where) 실행되는지: Development vs. Production
• 여러분의 코드가 언제(when) 실행되는지: Build Time vs. Runtime
• 렌더링이 어디서(where) 일어나는지: Client vs. Server

Development and Production Environments

You can think of environments as the context in which your code is running.