how nextjs works? Flashcards
what happens to your application code during these different stages:
1.The environment where your code runs: Development vs. …………………….
2.When your code runs: Build Time vs. ……………………….
3.Where rendering happens: Client vs. ………………………
1.Production, 2.Runtime, 3.Server
Development vs Production
……..(1)……………….. is when you’re working on your application on your own computer. You build and test it to make sure everything works as intended.
………(2)……….. is when your application is ready to be used by real users. It’s optimized to be efficient and user-friendly.
1.Development, 2.Production
Next.js’s Role:
Development Stage: Next.js makes development smoother by offering tools like……..(1)……….. and ………(2)……….. integration, ……(3)……… (which quickly updates your code changes), and more. It’s focused on enhancing the developer’s experience.
Production Stage: Next.js focuses on optimizing the application for ……………(4)…………. It ensures that the code is transformed to be high-performing and accessible.
(1) TypeScript (2)ESLint (3)Fast Refresh (4)end-users
Moving to Production:
Transitioning from development to production involves tasks like ............(1)................, ...............(2)................. (combining files together), ........(3)............. (reducing file sizes), and ...........(4).............. (loading only necessary code).
Next.js helps with these tasks by utilizing its ……….(5)……….-based compiler and ……….(6)…………, a versatile platform for compilation, bundling, and minification.
(1)compiling (2)bundling (3)minifying (4)code splitting (5)Rust (6)SWC
Developers write code in languages that are more developer-friendly such as JSX, TypeScript, and modern versions of JavaScript. they need to be compiled into JavaScript before …………(1)……………… can understand them. ……….(2)……………. refers to the process of taking code in one language and outputting it in another language or another version of that language.
browsers, Compiling
Developers write code that is optimized for human readability. This code might contain extra information that is not necessary for the code to run, such as ……..(1)………..(2)……..(3)…..and…..(4)…………
Minification is the process of removing unnecessary code formatting and comments without changing the code’s………(5)………….. The goal is to improve the application’s performance by decreasing file sizes.
In Next.js, JavaScript and CSS files are ………….(6)………….. minified for production.
(1-4)comments, spaces, indents, and multiple lines
(5)functionality
(6)automatically
Developers break up their application into modules, components, and ………………….. that can be used to build larger pieces of their application. Exporting and importing these internal modules, as well as external……………………. packages, creates a complex web of file dependencies.
functions, third-party,
Bundling is the process of resolving …………………………… and merging (or ‘packaging’) …………………….. into optimized bundles for the browser, with the goal of reducing the number of ……………………. for files when a user visits a web page.
the web of dependencies, the files (or modules), requests
Code-splitting is the process of splitting the application’s ……………………….. into smaller chunks required by each entry point . The goal of code splitting is to …………………. and …………………………….. for an entry point.
bundle, improve the application’s initial load, load only the required code
Developers usually split their applications into multiple pages that can be accessed from different URLs. Each of these pages becomes a unique ……………………………….. into the application.
entry point
Next.js has built-in support for code splitting. Each file inside your …………………………….. directory will be automatically code split into its own JavaScript bundle during the build step.
pages/,
Any code shared between pages is also split into another bundle to avoid ……………………………. on further navigation.
After the initial page load, Next.js can start …………………….. users are likely to navigate to.
…………………………….. are another way to manually split what code is initially loaded.
re-downloading the same code,
pre-loading the code of other pages,
Dynamic imports
