Cách Triển Khai Chuyển Hướng Trong Next.js

Các công cụ tìm kiếm cũng như người dùng đều không muốn tìm một trang không tồn tại hoặc không đầy đủ. Là một nhà phát triển, bạn cũng nên tránh nó vì nó có thể làm giảm số lượng truy cập lặp lại vào trang web của bạn và ảnh hưởng đến cách nó được lập chỉ mục bởi các công cụ tìm kiếm.

Next.js là một khung công tác phổ biến được xây dựng trên thư viện React và đi kèm với một loạt các tính năng tích hợp hữu ích, một trong số chúng là xử lý chuyển hướng để tránh những trường hợp như vậy.

Trong bài viết này, chúng tôi sẽ thiết lập một ứng dụng và xem xét kỹ hơn các cách khác nhau mà bạn có thể triển khai chuyển hướng trong các dự án Next.js của mình. Tôi cũng sẽ cung cấp các đoạn mã cho cả tệp cấu hình và tuyến đường và giải thích cách chúng hoạt động trong Next.js.

Bắt đầu nào.

Chuyển hướng là gì?

Chuyển hướng cho phép người dùng chuyển một URL đã thực thi sang một URL mới hoặc nói theo cách khác là định tuyến lại một yêu cầu đến từ đường dẫn này sang đường dẫn khác.

Chúng thường được máy chủ xử lý thông qua mã trạng thái chuyển hướng HTTP (3xx), cũng có thể được hiểu bởi trình thu thập thông tin web.

Chuyển hướng thường được sử dụng trong các trường hợp một phần của trang web không tồn tại hoặc đang được xây dựng, nội dung đã được chuyển đến một URL khác, hệ thống định tuyến đã thay đổi, người dùng bị chuyển hướng do hạn chế truy cập hoặc nhiều trường hợp khác.

Thiết lập dự án Next.js

Chúng tôi sẽ sử dụng create-next-app, đây là cách được Next.js chính thức hỗ trợ để thiết lập máy chủ phát triển mà chúng tôi sẽ sử dụng để kiểm tra các ví dụ chuyển hướng của mình.

Đầu tiên, mở thiết bị đầu cuối của bạn và chạy lệnh npx create-next-app test-app. Thao tác này sẽ tạo một thư mục dự án mới, nơi tất cả logic của ứng dụng sẽ hoạt động.

Tiếp theo, thay đổi thư mục làm việc thành thư mục mới được tạo bằng cd test-appvà sau đó chạy npm run devđể khởi động máy chủ phát triển.

Sau đó, mở trình duyệt của bạn và điều hướng đến https://localhost:3000để xem bản xem trước trực tiếp của ứng dụng.

Các tuyến đường xác định

Cách phổ biến nhất để tạo chuyển hướng trong Next.js là sử dụng next.config.jstệp, tệp này phải được đặt ở cấp cơ sở của cấu trúc sản phẩm của bạn. Nếu không, hãy tạo một mã và bao gồm mã sau:

module.exports = {
  async redirects() {
    return [
      {
        source: '/',
        destination: '/welcome',
        permanent: true,
      },
    ]
  },
}

Trong đoạn mã trên, thuộc sourcetính là tuyến được yêu cầu, destinationlà tuyến chúng tôi muốn chuyển hướng người dùng đến và permanentkiểm soát việc chúng tôi có muốn lưu tuyến chuyển hướng cho máy khách và công cụ tìm kiếm hay không.

Hãy tạo một tuyến đường mới cho /welcomechúng tôi đã sử dụng trong cấu hình. Trong cấp cơ sở của pagesthư mục, hãy tạo một tệp mới welcome.jsvà bao gồm mã sau:

export default function Welcome() {
  return <h1>Welcome page</h1>;
}

Bây giờ, khởi động lại máy chủ phát triển bằng cách nhấn Ctrl + C trên bàn phím của bạn và sau đó chạy; npm run devđể bắt đầu lại. Điều này là cần thiết để những thay đổi mà chúng tôi đã thực hiện next.config.jscó hiệu lực. Hãy nhớ làm điều này cho các ví dụ khác trong bài báo.

Để kiểm tra chuyển hướng, hãy mở trình duyệt của bạn và điều hướng https://localhost:3000lại. Bây giờ bạn sẽ được tự động chuyển hướng đến https://localhost:3000/welcome.

Kết hợp sên

Next.js hỗ trợ truy cập các slugs của URL và định cấu hình chuyển hướng cho chúng. Đối với ví dụ này, hãy chỉnh sửa next.config.jsthành:

module.exports = {
  async redirects() {
    return [
      {
        source: '/draft/:slug',
        destination: '/blog/:slug',
        permanent: true,
      },
    ]
  },
}

Để thiết lập các tuyến, hãy vào bên trong pagesthư mục và tạo hai thư mục mới có tên draftvà blog, sau đó tạo tệp article.jsbên trong cả hai.

Trong draft/article.jstệp, hãy bao gồm mã sau:

export default function Article() {
  return <h1>Source route</h1>;
}

Trong blog/article.js, hãy bao gồm mã sau:

export default function Article() {
  return <h1>Destination route</h1>;
}

Sau khi khởi động lại máy chủ nhà phát triển, hãy thử truy cập https://localhost:3000/draft/articlevà bạn sẽ được chuyển hướng đến https://localhost:3000/blog/article. Slug có thể là bất kỳ giá trị nào được hỗ trợ trong URL trừ khi bạn tạo một tuyến cho nó và không lồng nó trên nhiều cấp.

Ký tự đại diện

Để chuyển hướng các tuyến đường lồng nhau, bạn có thể sử dụng các ký tự đại diện, về cơ bản sẽ đưa tất cả các đường dẫn sau cấp đã biết cuối cùng và chuyển hướng đến tuyến đường mới. Nó đơn giản như việc thêm một *ký tự vào slug mà bạn đang nhắm mục tiêu trong URL.

Chuyển trở lại next.config.jsvà thay đổi nó thành thế này:

module.exports = {
  async redirects() {
    return [
      {
        source: '/draft/:slug*',
        destination: '/blog/:slug*',
        permanent: true,
      },
    ]
  },
}

Để tạo các tuyến lồng nhau, chúng ta sẽ phải tạo một vài thư mục con bên trong thư mục draftvà blog. Giả sử chúng ta muốn phân loại các bài báo thông qua các công nghệ, vì vậy chúng ta sẽ gọi cả hai thư mục react. Bên trong cả hai thư mục mới được tạo, hãy thêm tệp tutorial.js.

Trong draft/react/tutorial.js, bao gồm mã sau:

export default function Tutorial() {
  return <h1>Nested source route</h1>;
}

Trong blog/react/tutorial.js, bao gồm mã sau:

export default function Tutorial() {
  return <h1>Nested destination route</h1>;
}

Bây giờ, khởi động lại máy chủ nhà phát triển và truy cập https://localhost:3000/draft/react/tutorial. Bạn sẽ ngay lập tức được chuyển hướng đến https://localhost:3000/blog/react/tutorial. Lưu ý rằng toàn bộ đường dẫn lồng nhau đã được chuyển hướng.

Truy vấn Regex

Regex là một công cụ mạnh mẽ mà bạn có thể sử dụng để truy cập các phần khác nhau của đường dẫn URL hiệu quả hơn. Bạn sẽ có nhiều quyền kiểm soát hơn đối với hành vi chuyển hướng và sẽ được phép tạo các quy tắc tùy chỉnh cho chuyển hướng.

Thay đổi next.config.jsmã sau:

module.exports = {
  async redirects() {
    return [
      {
        source: '/draft/:slug(^[a-z]+)',
        destination: '/blog/article',
        permanent: false,
      },
    ]
  },
}

Trong đoạn mã ở trên, chúng tôi chỉ định cấu hình các tuyến chỉ bao gồm các ký tự ađến zđược chuyển hướng đến /blog/articletuyến mà chúng tôi đã tạo trước đó.

Điều hướng đến draftthư mục trong cấu trúc dự án của bạn và tạo một tệp mới article123.js, với mã sau trong đó:

export default function Article123() {
  return <h1>Source route</h1>;
}

Để kiểm tra truy vấn regex, hãy khởi động lại máy chủ nhà phát triển và cố gắng truy cập https://localhost:3000/draft/article. Bạn sẽ được chuyển hướng đến https://localhost:3000/blog/article, vì tuyến đường chỉ bao gồm các chữ cái.

Bây giờ hãy thử truy cập https://localhost:3000/draft/article123. Bạn sẽ được hiển thị nội dung của URL bạn đã nhập và không bị chuyển hướng vì tuyến đường bao gồm số.

Dưới đây là một số trang web hữu ích giúp bạn viết các truy vấn regex: regex101 và regexr .

Hỗ trợ đường dẫn cơ sở

Next.js cũng hỗ trợ tiền tố cho đường dẫn cơ sở trong URL. Điều này có thể hữu ích nếu bạn phải đặt nhiều chuyển hướng và không muốn viết lại đường dẫn cơ sở cho tất cả các tuyến đường của mình.

Thay đổi next.config.jsmã sau:

module.exports = {
  basePath: '/content',

  async redirects() {
    return [
      {
        source: '/draft/article',
        destination: '/blog/article',
        permanent: true,
      },
      {
        source: '/draft/react/tutorial',
        destination: '/blog/react/tutorial',
        basePath: false,
        permanent: true,
      },
    ]
  },
}

Trong đối tượng chuyển hướng đầu tiên, nguồn trở thành /content/draft/articlevà đích /content/blog/article, trong khi ở đối tượng chuyển hướng thứ hai, đường dẫn cơ sở đã bị bỏ qua vì chúng tôi đặt basePaththành false.

Yêu cầu tham số

Với Next.js, bạn thậm chí có thể kiểm soát nhiều hơn đối với chuyển hướng, truy cập các giá trị máy chủ lưu trữ, tiêu đề, cookie và truy vấn. Sử dụng hastrường này, bạn có thể viết các quy tắc tùy chỉnh để kiểm soát xem chuyển hướng có được thực hiện trong các trường hợp khác nhau hay không.

Thay đổi next.config.jsmã sau:

module.exports = {
  async redirects() {
    return [
      {
        source: '/',
        has: [
          {
            type: 'header',
            key: 'host',
            value: 'localhost:3000',
          },
        ],
        permanent: false,
        destination: '/welcome',
      },
    ];
  },
}

typePhải là headerhoặc , cookiehoặc query. keyPhải là một chuỗi từ loại đã chọn để so khớp với . Giá valuetrị là tùy chọn và nếu nó là không xác định, bất kỳ giá trị nào của giá trị keysẽ được khớp.

Trong đoạn mã ở trên, chúng tôi headerđã sử dụng và đối chiếu với hostkhóa để có localhost:3000giá trị. Nếu các giá trị này được đáp ứng trong yêu cầu, chuyển hướng sẽ được thực hiện.

Khởi động lại máy chủ nhà phát triển và cố gắng truy cập https://localhost:3000. Bạn sẽ được chuyển hướng đến https://localhost:3000/welcome, vì hostgiá trị đã khớp.

Bây giờ đóng máy chủ nhà phát triển bằng Ctrl + C và chạy npm run dev -- -p 8000. Thao tác này sẽ khởi động ứng dụng của bạn trên một cổng khác. Bây giờ, hãy truy cập vào ứng dụng của bạn https://localhost:8000. Lần này, bạn sẽ không được chuyển hướng, vì hostgiá trị không khớp với cấu hình chuyển hướng của bạn.

Chuyển hướng API

Next.js đi kèm với một cách tích hợp để xử lý các lệnh gọi API. Bạn có thể sử dụng redirectphương pháp này để thực hiện chuyển hướng nếu một phản hồi nhất định thành công. Điều này có thể thực sự hữu ích khi đăng nhập người dùng, gửi biểu mẫu và các trường hợp sử dụng khác.

Để tạo một tuyến API mới, hãy điều hướng đến apithư mục bên trong pagesvà tạo một tệp mới data.js, với mã sau:

export default async function handler(req, res) {
  console.log(`Name: ${req.body.name}`);
  try {
    // some await stuff here
    res.redirect(307, '/welcome');
  } catch (err) {
    res.status(500).send({ error: 'Error while fetching data' });
  }
}

Sau đó, điều hướng đến cấp cơ sở của pagesthư mục và tạo một tệp mới form.js, để tự tạo biểu mẫu. Bao gồm mã sau trong tệp mới tạo:

export default function Form() {
  return (
    <form action='/api/data' method='post'>
      <label htmlFor='name'>Your name:</label>
      <input type='text' id='name' name='name' />
      <button type='submit'>Submit</button>
    </form>
  );
}

Bây giờ, hãy mở trình duyệt của bạn và điều hướng đến https://localhost:3000/form. Bạn sẽ thấy trường nhập liệu để nhập tên của bạn và nút gửi để gửi giá trị đến API. Nhập bất kỳ giá trị nào, gửi giá trị đó và bạn sẽ được chuyển hướng đến https://localhost:3000/welcome.

Để đảm bảo API nhận được giá trị bạn đã nhập, hãy chuyển trở lại thiết bị đầu cuối và kiểm tra nhật ký đã in. Giá trị sẽ được hiển thị ở đó.

getStaticProps và getServerSideProps

Nếu bạn muốn đặt chuyển hướng thông qua các phương thức kết xuất trước tích hợp của Next.js, bạn có thể đưa chúng vào getStaticPropshoặc getServerSideProps.

Khi sử dụng getStaticProps, trang sẽ được hiển thị trước tại thời điểm xây dựng (tạo trang web tĩnh).

Để thiết lập một ví dụ, hãy điều hướng đến cấp cơ sở của pagesthư mục và chỉnh sửa index.js:

export default function Home() {
  return <h1>Home page</h1>;
}

export async function getStaticProps() {
  const content = null;

  if (!content) {
    return {
      redirect: {
        permanent: false,
        destination: '/welcome',
      },
    };
  }

  return {
    props: {},
  };
}

Tương tự, đối với kết xuất phía máy chủ (SSG), bạn sẽ sử dụng getServerSideProps, điều này sẽ đảm bảo Next.js kết xuất trước trang theo từng yêu cầu.

Để thiết lập ví dụ SSG, hãy chỉnh sửa index.jsnhư hình dưới đây:

export default function Home() {
  return <h1>Home page</h1>;
}

export async function getServerSideProps() {
  const content = null;

  if (!content) {
    return {
      redirect: {
        permanent: false,
        destination: '/welcome',
      },
    };
  }

  return {
    props: {},
  };
}

Để kiểm tra một trong hai trường hợp, hãy thử truy cập https://localhost:3000và bạn sẽ được tự động chuyển hướng đến https://localhost:3000/welcomevì các quy tắc chuyển hướng trong getStaticPropshoặc getServerSidePropsđã được thực thi.

Sự kết luận

Trong bài viết này, chúng tôi đã xem xét một số cách bạn có thể triển khai chuyển hướng trong Next.js. Đầu tiên, chúng tôi đã sử dụng next.config.jsvà viết các cấu hình tùy chỉnh cho các tuyến được xác định trước, các tuyến đơn cấp và lồng nhau đã truy cập, đồng thời sử dụng regex để tăng khả năng kiểm soát chuyển hướng.

Sau đó, chúng tôi cũng đã xem xét kỹ hơn cách bạn có thể tạo chuyển hướng dựa trên các thông số yêu cầu đã nhận được. Cuối cùng, chúng tôi đã xem xét cách triển khai chuyển hướng bằng cách sử dụng các tuyến API và tạo trang web tĩnh so với kết xuất phía máy chủ.

Tôi hy vọng với bài viết này, bạn đã học được điều gì đó mới và từ thời điểm này trở đi, bạn sẽ có thể tạo chuyển hướng cho tất cả các trường hợp sử dụng của mình trong ứng dụng Next.js trong tương lai.

Nguồn: https://blog.logrocket.com/redirects-next-js/

#nextjs

What is GEEK

Buddha Community

Cách Triển Khai Chuyển Hướng Trong Next.js

JavaScript Daily

1632537859

NBB: Ad-hoc CLJS Scripting on Node.js

Nbb

Not babashka. Node.js babashka!?

Ad-hoc CLJS scripting on Node.js.

Status

Experimental. Please report issues here.

Goals and features

Nbb's main goal is to make it easy to get started with ad hoc CLJS scripting on Node.js.

Additional goals and features are:

Fast startup without relying on a custom version of Node.js.
Small artifact (current size is around 1.2MB).
First class macros.
Support building small TUI apps using Reagent.
Complement babashka with libraries from the Node.js ecosystem.

Requirements

Nbb requires Node.js v12 or newer.

How does this tool work?

CLJS code is evaluated through SCI, the same interpreter that powers babashka. Because SCI works with advanced compilation, the bundle size, especially when combined with other dependencies, is smaller than what you get with self-hosted CLJS. That makes startup faster. The trade-off is that execution is less performant and that only a subset of CLJS is available (e.g. no deftype, yet).

Usage

Install nbb from NPM:

$ npm install nbb -g

Omit -g for a local install.

Try out an expression:

$ nbb -e '(+ 1 2 3)'
6

And then install some other NPM libraries to use in the script. E.g.:

$ npm install csv-parse shelljs zx

Create a script which uses the NPM libraries:

(ns script
  (:require ["csv-parse/lib/sync$default" :as csv-parse]
            ["fs" :as fs]
            ["path" :as path]
            ["shelljs$default" :as sh]
            ["term-size$default" :as term-size]
            ["zx$default" :as zx]
            ["zx$fs" :as zxfs]
            [nbb.core :refer [*file*]]))

(prn (path/resolve "."))

(prn (term-size))

(println (count (str (fs/readFileSync *file*))))

(prn (sh/ls "."))

(prn (csv-parse "foo,bar"))

(prn (zxfs/existsSync *file*))

(zx/$ #js ["ls"])

Call the script:

$ nbb script.cljs
"/private/tmp/test-script"
#js {:columns 216, :rows 47}
510
#js ["node_modules" "package-lock.json" "package.json" "script.cljs"]
#js [#js ["foo" "bar"]]
true
$ ls
node_modules
package-lock.json
package.json
script.cljs

Macros

Nbb has first class support for macros: you can define them right inside your .cljs file, like you are used to from JVM Clojure. Consider the plet macro to make working with promises more palatable:

(defmacro plet
  [bindings & body]
  (let [binding-pairs (reverse (partition 2 bindings))
        body (cons 'do body)]
    (reduce (fn [body [sym expr]]
              (let [expr (list '.resolve 'js/Promise expr)]
                (list '.then expr (list 'clojure.core/fn (vector sym)
                                        body))))
            body
            binding-pairs)))

Using this macro we can look async code more like sync code. Consider this puppeteer example:

(-> (.launch puppeteer)
      (.then (fn [browser]
               (-> (.newPage browser)
                   (.then (fn [page]
                            (-> (.goto page "https://clojure.org")
                                (.then #(.screenshot page #js{:path "screenshot.png"}))
                                (.catch #(js/console.log %))
                                (.then #(.close browser)))))))))

Using plet this becomes:

(plet [browser (.launch puppeteer)
       page (.newPage browser)
       _ (.goto page "https://clojure.org")
       _ (-> (.screenshot page #js{:path "screenshot.png"})
             (.catch #(js/console.log %)))]
      (.close browser))

See the puppeteer example for the full code.

Since v0.0.36, nbb includes promesa which is a library to deal with promises. The above plet macro is similar to promesa.core/let.

Startup time

$ time nbb -e '(+ 1 2 3)'
6
nbb -e '(+ 1 2 3)'   0.17s  user 0.02s system 109% cpu 0.168 total

The baseline startup time for a script is about 170ms seconds on my laptop. When invoked via npx this adds another 300ms or so, so for faster startup, either use a globally installed nbb or use $(npm bin)/nbb script.cljs to bypass npx.

Dependencies

NPM dependencies

Nbb does not depend on any NPM dependencies. All NPM libraries loaded by a script are resolved relative to that script. When using the Reagent module, React is resolved in the same way as any other NPM library.

Classpath

To load .cljs files from local paths or dependencies, you can use the --classpath argument. The current dir is added to the classpath automatically. So if there is a file foo/bar.cljs relative to your current dir, then you can load it via (:require [foo.bar :as fb]). Note that nbb uses the same naming conventions for namespaces and directories as other Clojure tools: foo-bar in the namespace name becomes foo_bar in the directory name.

To load dependencies from the Clojure ecosystem, you can use the Clojure CLI or babashka to download them and produce a classpath:

$ classpath="$(clojure -A:nbb -Spath -Sdeps '{:aliases {:nbb {:replace-deps {com.github.seancorfield/honeysql {:git/tag "v2.0.0-rc5" :git/sha "01c3a55"}}}}}')"

and then feed it to the --classpath argument:

$ nbb --classpath "$classpath" -e "(require '[honey.sql :as sql]) (sql/format {:select :foo :from :bar :where [:= :baz 2]})"
["SELECT foo FROM bar WHERE baz = ?" 2]

Currently nbb only reads from directories, not jar files, so you are encouraged to use git libs. Support for .jar files will be added later.

Current file

The name of the file that is currently being executed is available via nbb.core/*file* or on the metadata of vars:

(ns foo
  (:require [nbb.core :refer [*file*]]))

(prn *file*) ;; "/private/tmp/foo.cljs"

(defn f [])
(prn (:file (meta #'f))) ;; "/private/tmp/foo.cljs"

Reagent

Nbb includes reagent.core which will be lazily loaded when required. You can use this together with ink to create a TUI application:

$ npm install ink

ink-demo.cljs:

(ns ink-demo
  (:require ["ink" :refer [render Text]]
            [reagent.core :as r]))

(defonce state (r/atom 0))

(doseq [n (range 1 11)]
  (js/setTimeout #(swap! state inc) (* n 500)))

(defn hello []
  [:> Text {:color "green"} "Hello, world! " @state])

(render (r/as-element [hello]))

Promesa

Working with callbacks and promises can become tedious. Since nbb v0.0.36 the promesa.core namespace is included with the let and do! macros. An example:

(ns prom
  (:require [promesa.core :as p]))

(defn sleep [ms]
  (js/Promise.
   (fn [resolve _]
     (js/setTimeout resolve ms))))

(defn do-stuff
  []
  (p/do!
   (println "Doing stuff which takes a while")
   (sleep 1000)
   1))

(p/let [a (do-stuff)
        b (inc a)
        c (do-stuff)
        d (+ b c)]
  (prn d))

$ nbb prom.cljs
Doing stuff which takes a while
Doing stuff which takes a while
3

Also see API docs.

Js-interop

Since nbb v0.0.75 applied-science/js-interop is available:

(ns example
  (:require [applied-science.js-interop :as j]))

(def o (j/lit {:a 1 :b 2 :c {:d 1}}))

(prn (j/select-keys o [:a :b])) ;; #js {:a 1, :b 2}
(prn (j/get-in o [:c :d])) ;; 1

Most of this library is supported in nbb, except the following:

destructuring using :syms
property access using .-x notation. In nbb, you must use keywords.

See the example of what is currently supported.

Examples

See the examples directory for small examples.

Also check out these projects built with nbb:

c64core: retrocompute aesthetics twitter bot
gallery.cljs: script to download walpapers from windowsonearth.org.
nbb-action-example: example of a Github action built with nbb.

API

See API documentation.

Migrating to shadow-cljs

See this gist on how to convert an nbb script or project to shadow-cljs.

Build

Prequisites:

babashka >= 0.4.0
Clojure CLI >= 1.10.3.933
Node.js 16.5.0 (lower version may work, but this is the one I used to build)

To build:

Clone and cd into this repo
bb release

Run bb tasks for more project-related tasks.

Download Details:
Author: borkdude
Download Link: Download The Source Code
Official Website: https://github.com/borkdude/nbb
License: EPL-1.0

#node #javascript

Eva Murphy

1625674200

Google analytics Setup with Next JS, React JS using Router Events - 14

In this video, we are going to implement Google Analytics to our Next JS application. Tracking page views of an application is very important.

Google analytics will allow us to track analytics information.

Frontend: https://github.com/amitavroy/video-reviews
API: https://github.com/amitavdevzone/video-review-api
App link: https://video-reviews.vercel.app

You can find me on:
Twitter: https://twitter.com/amitavroy7
Discord: https://discord.gg/Em4nuvQk

#next js #js #react js #react #next #google analytics

Eva Murphy

1625751960

Laravel API and React Next JS frontend development - 28

In this video, I wanted to touch upon the functionality of adding Chapters inside a Course. The idea was to not think much and start the development and pick up things as they come.

There are places where I get stuck and trying to find answers to it up doing what every developer does - Google and get help. I hope this will help you understand the flow and also how developers debug while doing development.

App url: https://video-reviews.vercel.app
Github code links below:
Next JS App: https://github.com/amitavroy/video-reviews
Laravel API: https://github.com/amitavdevzone/video-review-api

You can find me on:
Twitter: https://twitter.com/amitavroy7
Discord: https://discord.gg/Em4nuvQk

#next js #api #react next js #next #frontend #development

Lilyan Streich

1599119110

Next js Tutorial For Beginners

Next js Tutorial For Beginners is the today’s topic. It is no secret that creating single-page applications can be immensely challenging these days. But with the help of some libraries, frameworks, and tools, it is effortless nowadays. React.js is the common frontend libraries among the Front-end developers. Its virtual dom theory makes React faster and gives us the better application performance. Now, one problem is that Single Page Applications are not at all SEO friendly because it is rendered on the Client side and not Server side . So when the Search Engine crawlers try to send a request, they cannot get our meta content or description and not even the main content. Search Engines do not care about how your app is architected or whatever ideology was used to adjust and fetch the right material. Their bots are not as smart as using your apps as a real user would. All they care about is that once they send their spiders to crawl and index your site, whatever the server provides on the first request is what gets indexed. In our case, all they get is our div tag with an id and bundled JS file, and we can not index our website correctly. So some how, we need a SSR to tackle this problem and in React js, Next.js is the perfect solution.

#js #react.js #next.js

Trung Nguyen

1660916160