From bd044121299bc252d4b6d06225b3c2e27dd41e6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Necati=20=C3=96zmen?= <necatiozmn@gmail.com>
Date: Tue, 30 Jul 2024 11:40:03 +0300
Subject: [PATCH 1/2] docs(blog): update vite post (#6207)

---
 documentation/blog/2024-07-29-git-diff.md     |   2 +-
 ...05-15-vite-js.md => 2024-07-30-vite-js.md} | 265 +++++++++++++++++-
 2 files changed, 258 insertions(+), 9 deletions(-)
 rename documentation/blog/{2023-05-15-vite-js.md => 2024-07-30-vite-js.md} (67%)

diff --git a/documentation/blog/2024-07-29-git-diff.md b/documentation/blog/2024-07-29-git-diff.md
index 97ed15fab8e8..af933312bf8d 100644
--- a/documentation/blog/2024-07-29-git-diff.md
+++ b/documentation/blog/2024-07-29-git-diff.md
@@ -8,7 +8,7 @@ image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-05-12-git-diff/s
 hide_table_of_contents: false
 ---
 
-_This article was last updated on July 29, 2024, to add sections for security and using Git Diff with other Git Commands._
+**This article was last updated on July 29, 2024, to add sections for security and using Git Diff with other Git Commands.**
 
 ## Introduction
 
diff --git a/documentation/blog/2023-05-15-vite-js.md b/documentation/blog/2024-07-30-vite-js.md
similarity index 67%
rename from documentation/blog/2023-05-15-vite-js.md
rename to documentation/blog/2024-07-30-vite-js.md
index 43899eb7945b..82957f4d28c5 100644
--- a/documentation/blog/2023-05-15-vite-js.md
+++ b/documentation/blog/2024-07-30-vite-js.md
@@ -4,10 +4,12 @@ description: We will explore what is Vite.js and compare it to Webpack.
 slug: what-is-vite-vs-webpack
 authors: victor_uma
 tags: [javascript, dev-tools]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-05-15-vite-js/social.png
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-05-15-vite-js/social-2.png
 hide_table_of_contents: false
 ---
 
+**This article was last updated on July 30, 2024, to add sections for Custom Vite Configurations and Performance Optimization.**
+
 ## Introduction
 
 We'll talk about the history of vite and the importance of using Vite, we'll also deep dive into developer experience with Vite and why you want to start using Vite.
@@ -24,11 +26,12 @@ It is this very problem that has brought about the creation of **Vite!.** [Vite.
 Steps we'll cover:
 
 - [What is Vite.js?](#what-is-vitejs)
-  - [How does Vite.js Address Performance Challenges?](#how-does-vitejs-address-performance-challenges)
 - [Key Features of Vite](#key-features-of-vite)
 - [Vite vs Webpack](#vite-vs-webpack)
 - [Migrating from Webpack to Vite](#migrating-from-webpack-to-vite)
 - [Using Vite.js in practice](#using-vitejs-in-practice)
+- [Custom Vite Configurations](#custom-vite-configurations)
+- [Performance Optimization in Vite](#performance-optimization-in-vite)
 
 ## What is Vite.js?
 
@@ -158,12 +161,258 @@ In the scripts file we have our commands for building for production and creatin
 }
 ```
 
-<br/>
-<div>
-<a href="https://discord.gg/refine">
-  <img  src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/discord_big_blue.png" alt="discord banner" />
-</a>
-</div>
+## Custom Vite Configurations
+
+Let me share some insights on how we can make Vite configurations more customized and more oriented to our project's needs. Vite is pretty flexible, and with some tweaks in the configuration, it can be fully optimized to your setup and workflow.
+
+### Basic Setup
+
+First of all, we will have to create the `vite.config.js` located in the root of our project. This file is going to enable us to set a few configurations.
+
+```javascript
+// vite.config.js
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  // configuration options
+});
+```
+
+### Server Customization
+
+In this option, we can configure development server settings like port, open behavior, and proxy settings.
+
+```javascript
+// vite.config.js
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  server: {
+    port: 3000, // Change the port
+    open: true, // Open the browser automatically
+    proxy: {
+      "/api": {
+        target: "http://localhost:5000",
+        changeOrigin: true,
+      },
+    },
+  },
+});
+```
+
+### Alias Configuration
+
+Giving aliases shortens the import paths and might help in creating our code with increased readability.
+
+```javascript
+// vite.config.js
+import { defineConfig } from "vite";
+import path from "path";
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});
+```
+
+### Plugins
+
+Vite supports many types of plugins to extend it. For instance, we could add a plugin to handle Vue files.
+
+```javascript
+// vite.config.js
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+export default defineConfig({
+  plugins: [vue()],
+});
+```
+
+### Environment Variables
+
+We define environment variables by using `.env` files for different stages such as development, production etc.
+
+```env
+// .env
+VITE_API_URL=http://localhost:5000
+```
+
+We then apply them in our project as below:
+
+```javascript
+// example.js
+console.log(import.meta.env.VITE_API_URL);
+```
+
+### Build Options
+
+Customization of build provides possibilities to improve the performance and output of our application.
+
+```javascript
+// vite.config.js
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  build: {
+    outDir: "dist",
+    sourcemap: true,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          vendor: ["react", "react-dom"],
+        },
+      },
+    },
+  },
+});
+```
+
+## Performance Optimization in Vite
+
+I wanted to share with you some tips about optimizing performance in use with Vite. With these configurations, our development process will be faster and build performance improved.
+
+### Quick builds with esbuild
+
+Vite uses Esbuild under the hood. It is known to be very fast, so try to configure it to take full advantage of this fact.
+
+```javascript
+// vite.config.js
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  esbuild: {
+    minify: true,
+  },
+});
+```
+
+### Code Splitting
+
+By default, Vite will automatically split your code into separate chunks for better caching and loading. You can fine-tune the output even further by using `rollupOptions`.
+
+```javascript
+// vite.config.js
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes("node_modules")) {
+            return "vendor";
+          }
+        },
+      },
+    },
+  },
+});
+```
+
+### Tree Shaking
+
+Enable tree shaking so that dead code can be deleted.
+
+```javascript
+// vite.config.js
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  build: {
+    treeshake: true,
+  },
+});
+```
+
+### Lazy Loading
+
+Lazy load modules using dynamic imports when required.
+
+```javascript
+// example.js
+import("path/to/module").then((module) => {
+  // use module
+});
+```
+
+### OptimizeDeps
+
+Pre-bundle the dependencies in order to make the start time of the development server slightly faster.
+
+```javascript
+// vite.config.js
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  optimizeDeps: {
+    include: ["react", "react-dom"],
+  },
+});
+```
+
+### Minification
+
+Ensure that your JavaScript and CSS files are minified in the production environment.
+
+```javascript
+// vite.config.js
+import { defineConfig } from "vite";
+import cssnano from "cssnano";
+
+export default defineConfig({
+  css: {
+    postcss: {
+      plugins: [cssnano()],
+    },
+  },
+  build: {
+    minify: "esbuild",
+  },
+});
+```
+
+### Using CDN for Libraries
+
+Offload big libraries to a content delivery network to reduce the bundle size.
+
+```javascript
+// vite.config.js
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      vue: "https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.esm-browser.js",
+    },
+  },
+});
+```
+
+### Cache Busting
+
+Activate the cache busting feature to ensure your users receive the latest files.
+
+```javascript
+// vite.config.js
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  build: {
+    manifest: true,
+    rollupOptions: {
+      output: {
+        entryFileNames: "assets/[name].[hash].js",
+        chunkFileNames: "assets/[name].[hash].js",
+        assetFileNames: "assets/[name].[hash].[ext]",
+      },
+    },
+  },
+});
+```
 
 ## Conclusion
 

From a94dcb28b7e8948a12c0658a591d415142f06181 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Necati=20=C3=96zmen?= <necatiozmn@gmail.com>
Date: Tue, 30 Jul 2024 11:40:16 +0300
Subject: [PATCH 2/2] docs(blog): update redirects post (#6208)

---
 ...irects.md => 2024-07-30-next-redirects.md} | 156 +++++++++++++++++-
 1 file changed, 149 insertions(+), 7 deletions(-)
 rename documentation/blog/{2023-05-16-next-redirects.md => 2024-07-30-next-redirects.md} (74%)

diff --git a/documentation/blog/2023-05-16-next-redirects.md b/documentation/blog/2024-07-30-next-redirects.md
similarity index 74%
rename from documentation/blog/2023-05-16-next-redirects.md
rename to documentation/blog/2024-07-30-next-redirects.md
index a89a4b442ef8..dd50d6ed9644 100644
--- a/documentation/blog/2023-05-16-next-redirects.md
+++ b/documentation/blog/2024-07-30-next-redirects.md
@@ -4,10 +4,12 @@ description: We'll examine the concept of URL redirection in Next.js and how red
 slug: next-js-redirect
 authors: michael
 tags: [nextjs]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-05-16-next-redirects/social.png
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-05-16-next-redirects/social-2.png
 hide_table_of_contents: false
 ---
 
+**This article was last updated on July 29, 2024, to add sections for Custom Redirects and Redirect Chains.**
+
 ## Introduction
 
 The concept of URL redirection in web application development is one that is ubiquitous. We experience it almost every time during our usage of the internet. Think about the last time you were trying to sign up on a website and they asked you to sign up with Google. Remember all the pop-ups and redirects that happen before you're finally signed up to the website? Yeah, that's a typical example of URL redirection in web app development.
@@ -19,6 +21,8 @@ Steps we'll cover:
 - [What is URL Redirection?](#what-is-url-redirection)
 - [How to make redirects in Next.js](#how-to-make-redirects-in-nextjs)
 - [Methods of Redirecting in Next.js](#methods-of-redirecting-in-nextjs)
+- [Custom Redirects](#custom-redirects)
+- [Performance Considerations](#performance-considerations)
 
 ## Prerequisites
 
@@ -321,12 +325,150 @@ export const getServerSideProps = async ({ res }) => {
 };
 ```
 
-<br/>
-<div>
-<a href="https://discord.gg/refine">
-  <img  src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/discord_big_blue.png" alt="discord banner" />
-</a>
-</div>
+## Custom Redirects
+
+This is where you might specify to developers how they are to implement custom redirects based on certain criteria—be it user roles, authentication states, or certain actions by a user.
+
+### User Role-Based Redirects
+
+```tsx
+export async function getServerSideProps(context) {
+  const { userRole } = context.req;
+
+  if (userRole !== "admin") {
+    return {
+      redirect: {
+        destination: "/unauthorized",
+        permanent: false,
+      },
+    };
+  }
+
+  return {
+    props: {}, // will be passed to the page component as props
+  };
+}
+```
+
+### Authentication-Based Redirects
+
+```tsx
+export async function getServerSideProps(context) {
+  const { isAuthenticated } = context.req;
+
+  if (!isAuthenticated) {
+    return {
+      redirect: {
+        destination: "/login",
+        permanent: false,
+      },
+    };
+  }
+
+  return {
+    props: {}, // will be passed to the page component as props
+  };
+}
+```
+
+## Chains of Redirects
+
+Describe how you would handle multiple redirections without creating a redirect loop. In this section, please feel free to offer advice on how to design redirect logic that will not lead to such infinite loops and will allow the user to always complete the journey to their destination of interest.
+
+### Multiple Redirects
+
+```tsx
+export async function getServerSideProps(context) {
+  const { isAuthenticated, userRole } = context.req;
+
+  if (!isAuthenticated) {
+    return {
+      redirect: {
+        destination: "/login",
+        permanent: false,
+      },
+    };
+  }
+
+  if (userRole !== "admin") {
+    return {
+      redirect: {
+        destination: "/unauthorized",
+        permanent: false,
+      },
+    };
+  }
+
+  return {
+    props: {}, // will be passed to the page component as props
+  };
+}
+```
+
+## Performance Considerations
+
+You can also explore how redirects contribute to Next.js application performance.
+
+### Making User-Friendly Redirects
+
+- Use server-side redirects (via `getServerSideProps`) rather than navigating via the client.
+- Minimize redirects to reduce HTTP requests.
+
+## Redirections w.r.t Internationalization (i18n)
+
+If your application is localized for various languages, explain how to keep redirects for user language settings intact.
+
+### Linguistic Reductions
+
+```tsx
+export async function getServerSideProps({ req, res }) {
+  const { locale } = req;
+
+  if (locale === "fr") {
+    return {
+      redirect: {
+        destination: "/fr/welcome",
+        permanent: false,
+      },
+    };
+  }
+
+  return {
+    props: {}, // will be passed to the page component as props
+  };
+}
+```
+
+## SEO Best Practices
+
+So, make an attempt with me, and we will tell you how to make more graceful redirects. Discuss the importance of using the right HTTP status codes, and major pitfalls to avoid that may produce a rather destructive influence on the ranking of the website for search engines.
+
+### SEO Redirects
+
+- Permanent changes, for example, should be saved with 301 redirects to keep the SEO rankings.
+- They're attempting to avoid any diluting of link equity by redirecting to the chains.
+- Ensuring that each redirect drops the user on some piece of relevant content that is informative and engaging.
+
+## Test Redirects
+
+Include methodologies and tools for testing that redirects work as intended. It can cover automated testing using frameworks such as Cypress or manual testing hints.
+
+### Automated Redirect Testing
+
+```jsx
+describe("Redirects", () => {
+  it("should redirect to login if not authenticated", () => {
+    cy.visit("/");
+    cy.url().should("include", "/login");
+  });
+
+  it("should redirect to home if authenticated", () => {
+    cy.setCookie("isAuthenticated", "true");
+    cy.visit("/");
+    cy.url().should("include", "/home");
+  });
+});
+```
 
 ## Conclusion