misostack · September 5, 2025 14:57 · Sep 18, 2022 · Sep 17, 2022 · Sep 16, 2022 · Sep 15, 2022
diff --git a/nextjs-cheatsheet.md b/nextjs-cheatsheet.md
@@ -264,3 +264,10 @@ export const getStaticProps: GetStaticProps<{ page: PageModel }> = async ({
 };
 
 ```
+
+### NextJS Environment
+
+![image](https://user-images.githubusercontent.com/31009750/190902902-a760c9bd-dffb-4d13-99ec-bb65d2291bda.png)
+
+- .env.[NODE_ENV] to load environment variables
+- Expose environment variables to the browser by prefixing with NEXT_PUBLIC_
diff --git a/nextjs-cheatsheet.md b/nextjs-cheatsheet.md
@@ -215,3 +215,52 @@ export const getServerSideProps: GetServerSideProps<{
 ![image](https://user-images.githubusercontent.com/31009750/190581836-de313208-7dd6-41b2-bc75-4ee59b7bdfea.png)
 
 
+### getStaticPaths and getStaticProps
+
+![image](https://user-images.githubusercontent.com/31009750/190840369-d6844d5a-cf36-4dad-93cf-969ea6b2eb8f.png)
+
+```ts
+import { GetStaticPaths, GetStaticProps } from "next";
+import { useRouter } from "next/router";
+import { PageModel } from "../business/models";
+import Page from "../components/page";
+
+export default (props: { page: PageModel }) => {
+  const router = useRouter();
+  const { page } = props;
+  if (router.isFallback) {
+    return <div>Loading...</div>;
+  }
+  //const { pageSlug } = router.query;
+  return <Page page={page}></Page>;
+};
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const paths = [{ params: { pageSlug: "lien-he" } }];
+  return {
+    paths,
+    // don't build static page at build time, keep it for the 1st request
+    // to reduce build time
+    fallback: true,
+  };
+};
+
+export const getStaticProps: GetStaticProps<{ page: PageModel }> = async ({
+  params,
+}) => {
+  const pageSlug = (params["pageSlug"] as string) || "";
+  const page: PageModel = {
+    title: `Page with slug = ${pageSlug}`,
+    slug: pageSlug,
+    content: `Content of page with slug = ${pageSlug}`,
+    featureImage: "",
+    id: Math.random().toFixed(),
+  };
+  return {
+    props: {
+      page,
+    },
+  };
+};
+
+```
diff --git a/nextjs-cheatsheet.md b/nextjs-cheatsheet.md
@@ -164,6 +164,8 @@ export default Layout;
 
 ### getServerSideProps
 
+#### Return Props
+
 ```ts
 export async function getServerSideProps(context) {
   return {
@@ -174,4 +176,42 @@ export async function getServerSideProps(context) {
 
 ![image](https://user-images.githubusercontent.com/31009750/190312415-69d88401-1238-4e86-9911-f91ae11d421a.png)
 
+#### 404 Notfound
+
+![image](https://user-images.githubusercontent.com/31009750/190581688-74b9b6e0-d493-497b-a52c-7777cb436b47.png)
+
+```ts
+export const getServerSideProps: GetServerSideProps<{
+  category: BlogCategoryModel;
+}> = async (context) => {
+  const { query } = context;
+  const categorySlug = query.categorySlug;
+  if (categorySlug === "posts") {
+    return {
+      notFound: true,
+    };
+  }
+  const category: BlogCategoryModel = {
+    title: `Category [${categorySlug}]`,
+    posts: Array.from(new Array(6)).map((_, idx) => {
+      return {
+        title: `Post ${++idx}`,
+        content: "",
+        id: "1",
+        featureImage: "",
+        slug: "post-1",
+      };
+    }),
+  };
+  return {
+    props: { category },
+  };
+};
+
+```
+
+#### Redirect
+
+![image](https://user-images.githubusercontent.com/31009750/190581836-de313208-7dd6-41b2-bc75-4ee59b7bdfea.png)
+
 
diff --git a/nextjs-cheatsheet.md b/nextjs-cheatsheet.md
@@ -160,3 +160,18 @@ export default Layout;
 
 ```
 
+## Data Fetching
+
+### getServerSideProps
+
+```ts
+export async function getServerSideProps(context) {
+  return {
+    props: {}, // will be passed to the page component as props
+  }
+}
+```
+
+![image](https://user-images.githubusercontent.com/31009750/190312415-69d88401-1238-4e86-9911-f91ae11d421a.png)
+
+
diff --git a/nextjs-cheatsheet.md b/nextjs-cheatsheet.md
@@ -99,3 +99,64 @@ Similar to CDNs, Edge servers are distributed to multiple locations around the w
 
 ![image](https://user-images.githubusercontent.com/31009750/189333653-0cfd5017-d1c8-44b8-880b-c2730598580b.png)
 
+### Layouts
+
+![image](https://user-images.githubusercontent.com/31009750/190055658-077b00a1-1fd2-4423-bfc6-5fd6a3977e81.png)
+
+The main idea is creating a layout component which will wrap your page component. We can use the hierarchy file structure in nextjs to apply this pattern
+
+```tsx
+// pages/_document.tsx
+import { Html, Head, Main, NextScript } from "next/document";
+
+export default function Document() {
+  return (
+    <Html lang="vi">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}
+
+// pages/_app.tsx
+import type { ReactElement, ReactNode } from "react";
+import type { NextPage } from "next";
+import type { AppProps } from "next/app";
+
+import "../styles/global.scss";
+
+export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
+  getLayout?: (page: ReactElement) => ReactNode;
+};
+
+type AppPropsWithLayout = AppProps & {
+  Component: NextPageWithLayout;
+};
+
+export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
+  // Use the layout defined at the page level, if available
+  const getLayout = Component.getLayout ?? ((page) => page);
+
+  return getLayout(<Component {...pageProps} />);
+}
+
+// components/layout-default.tsx
+import Meta from "./partials/meta-head";
+
+const Layout = ({ children }) => {
+  return (
+    <>
+      <Meta />
+      <main>{children}</main>
+    </>
+  );
+};
+
+export default Layout;
+
+
+```
+
diff --git a/nextjs-cheatsheet.md b/nextjs-cheatsheet.md
@@ -90,3 +90,12 @@ NestJS use [SWC](https://swc.rs/) to replace Babel as a compiled tool.
 ### The Edge
 
 Similar to CDNs, Edge servers are distributed to multiple locations around the world. But unlike CDNs, which store static content, some Edge servers can run code.
+
+## Pages & Links
+
+### NextJS Page Routes
+
+![image](https://user-images.githubusercontent.com/31009750/189331611-f7dc0b51-de1f-4d66-8e89-3dee2c7ced3b.png)
+
+![image](https://user-images.githubusercontent.com/31009750/189333653-0cfd5017-d1c8-44b8-880b-c2730598580b.png)
+
diff --git a/nextjs-cheatsheet.md b/nextjs-cheatsheet.md
@@ -81,5 +81,12 @@ NestJS use [SWC](https://swc.rs/) to replace Babel as a compiled tool.
 
 ![image](https://user-images.githubusercontent.com/31009750/189327427-84665ea2-163f-4700-b097-1dbef1bedea0.png)
 
+> Next.js **pre-renders** every page by **default**
 
-> Next.js **pre-renders** every page by **default**
+### Content Delivery Networks ( CDN )
+
+![image](https://user-images.githubusercontent.com/31009750/189328170-4990e603-17cf-463f-bd98-8c21f8b70fe9.png)
+
+### The Edge
+
+Similar to CDNs, Edge servers are distributed to multiple locations around the world. But unlike CDNs, which store static content, some Edge servers can run code.
diff --git a/nextjs-cheatsheet.md b/nextjs-cheatsheet.md
@@ -40,4 +40,46 @@ NestJS use [SWC](https://swc.rs/) to replace Babel as a compiled tool.
 
 ### BuildTime vs Runtime
 
-### Rendering on Client/Server
+> BuildTime: is giving name for a series of steps that transform application's code into production-optimized files to be deployed on server and consumed by users includes:
+
+- HTML Files for static generated pages
+- Javascript code for rendering pages on the server
+- JavaScript code for making pages interactive on the client
+- CSS Files
+
+![image](https://user-images.githubusercontent.com/31009750/189322997-c68d4fe7-da1d-46fa-a438-c21995bb11b2.png)
+
+> Runtime: refers to the period of time when your application runs in response to a user's request
+
+### Rendering on Client/Server
+
+> Rendering: convert your reactjs code into HTML representation of your UI. Can be happened in
+
+- Client Side - Client Side Rendering
+- A head of time at build time - Static Side Generation ( Pre-Rendering )
+- Server Side - Every request at runtime - Server Side Rendering ( Pre-Rendering )
+
+**Pre-Rendering**
+
+![image](https://user-images.githubusercontent.com/31009750/189324555-02b5f607-0551-4084-9787-85d151dbc660.png)
+
+**Client-Side-Rendering**
+
+![image](https://user-images.githubusercontent.com/31009750/189324919-4598e6f9-85f4-4252-b4c5-cca03c0116f4.png)
+
+![image](https://user-images.githubusercontent.com/31009750/189325940-14dc0a09-b787-4294-b8a7-7bf8aec15927.png)
+
+**Server-Side-Rendering**
+
+![image](https://user-images.githubusercontent.com/31009750/189326613-2c9ade67-a395-4142-8847-2770ede4ab2d.png)
+
+**Static-Side-Generation**
+
+![image](https://user-images.githubusercontent.com/31009750/189327114-c93a0b62-0a0d-4585-9fe8-2629a53289a2.png)
+
+**Can you have multiple rendering methods into a single next.js application?**
+
+![image](https://user-images.githubusercontent.com/31009750/189327427-84665ea2-163f-4700-b097-1dbef1bedea0.png)
+
+
+> Next.js **pre-renders** every page by **default**
diff --git a/nextjs-cheatsheet.md b/nextjs-cheatsheet.md
@@ -2,6 +2,42 @@
 
 npx create-next-app seo --use-yarn --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
 
-1. Overview Architecture
+## Overview Architecture
 
 ![image](https://user-images.githubusercontent.com/31009750/189313577-11914637-69ac-41b3-b484-ad94af5e62c9.png)
+
+> Main Concept
+
+### Development vs Production
+
+**Development stage:** TypeScript and ESLint integration, Fast Refresh, ...
+
+**Production stage:** Compiled, Bundled, Minified and Code Split
+
+![image](https://user-images.githubusercontent.com/31009750/189321689-850dec65-79e9-471c-955b-e4e6a678dbe2.png)
+
+> Compiled : JSX -> should be transformed to JS version that browser can understand
+
+![image](https://user-images.githubusercontent.com/31009750/189316973-d408a03b-9ad8-4608-acc3-bfa81b0837f2.png)
+
+NestJS use [SWC](https://swc.rs/) to replace Babel as a compiled tool.
+
+> Minifying: Removed unnessary code formatting and comments without changing the code's functionality
+
+![image](https://user-images.githubusercontent.com/31009750/189317028-902e7d38-5eaa-4dff-ba49-62fcbfe16b5a.png)
+
+> Bundled: Resolved the web of dependencies(packages) and merging the files(modules) into optimized bundled for browser, the goal is reducing the number of requests for files when user visit a web page
+
+![image](https://user-images.githubusercontent.com/31009750/189318349-8c2ade40-4cf1-4ade-b6c7-62d1f41afee1.png)
+
+> Code Splitting: Splitting the application's bundle into smaller chunks required by each entry point ( page URL ). The goal is reducing the initial time for the app - only loading the code required to run that page:
+
+- Shared Code between pages
+- Preloading Code
+- Dynamic Imports
+
+![image](https://user-images.githubusercontent.com/31009750/189318282-07a77775-9351-457f-b897-dabc328e9943.png)
+
+### BuildTime vs Runtime
+
+### Rendering on Client/Server
diff --git a/nextjs-cheatsheet.md b/nextjs-cheatsheet.md
@@ -1,3 +1,7 @@
 # NextJS CheatSheet
 
-npx create-next-app seo --use-yarn --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
+npx create-next-app seo --use-yarn --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
+
+1. Overview Architecture
+
+![image](https://user-images.githubusercontent.com/31009750/189313577-11914637-69ac-41b3-b484-ad94af5e62c9.png)
diff --git a/nextjs-cheatsheet.md b/nextjs-cheatsheet.md
@@ -0,0 +1,3 @@
+# NextJS CheatSheet
+
+npx create-next-app seo --use-yarn --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# NextJS CheatSheet

		npx create-next-app seo --use-yarn --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"