使用多区域组合多个 Next.Js 应用程序

在开发大型 Web 项目时，我们需要一个团队。但是当它是一个庞大的项目时，我们可以将项目拆分为多个并将其分配给多个团队。我们可以单独运行每个项目，甚至将它们托管在不同的服务器上。这使团队可以更好地控制大型项目。在这里，我们将讨论 Multi Zones，即 Next.js 组合多个应用程序的方式。

先决条件

在继续本文之前，我假设读者对以下技术有基本的了解：-

使用 Next.js 框架

我们将学到什么

完成本文后，我们将创建两个 Next.js 应用程序并使用多区域功能将它们组合起来。

完成所有步骤后，该应用程序将与下面给出的相同。

什么是区域？

区域实际上是指在服务器上或本地运行的单个 Next.js 应用程序。我们可以将多个区域合并到一个应用程序中。

假设我们正在开发一个带有博客部分的产品网站。如果域名是https://kuty.me，我们想要获取 URL为https://kuty.me/blog的博客部分。

在正常情况下，我们可以在一个应用程序中编写两个用例。但是我们需要对这两个部分进行更多控制，以便分别创建两个 Next.js 应用程序来提供两个不同的 URL。

然后我们将合并这两个应用程序，以便第一个应用程序中路径/页面的更改返回第二个应用程序的页面。

参考表格会让我们更深入地理解逻辑。

区	网址
Next.js App 1(首页)	https://kuty.me
Next.js 应用程序 2（博客）	https://kuty.me/blog

因此，让我们开始编写两个简单的 Next.js 应用程序并将它们组合起来。多个 Next.js 应用程序可以组合在一起使用多区域功能构建一个巨大的应用程序。

安装 Node.js、VS 代码并创建项目目录

我们可以使用 NPX 工具轻松创建 Next.js 应用程序。所以我们需要先在我们的系统上安装 Node.js。在我们的系统上安装 Node.js或检查它是否已经存在。

我们正在创建一个目录my-business-website并将 Next.js 应用程序都放在其中。

mkdir my-business-website cd my-business-website

我还假设您已经在系统上安装了 VS 代码。否则，安装它。

创建第一个 Next.js 应用程序以提供主页

现在我们可以使用 NPX 工具创建一个 Next.js 应用程序。这个应用程序的职责是服务于主页或 / 路由。

npx create-next-app 主页 cd 主页代码。

这将在 VS 代码中打开我们的第一个项目。现在从 VS 代码终端运行我们的第一个 Next.js 应用程序。

npm 运行开发

创建第二个 Next.js 应用程序以提供博客部分

以同样的方式，如上所述，我们需要创建另一个 Next.js 应用程序来服务博客部分。

npx create-next-app 博客 cd 博客代码。

这将在 VS 代码中打开我们的第一个项目。现在从 VS 代码终端运行我们的第一个 Next.js 应用程序。

在这里，在运行应用程序之前，我们需要从package.json 文件中更改端口。因为我们需要在单独的端口号中并行运行第二个应用程序。在这里，我为第二个应用程序选择端口 4000。

"scripts": {
    "dev": "next dev -p 4000",
    ...
},

这样完整的package.json文件看起来如下所示。

npm 运行开发

现在Next.js 应用程序 1（主页）和Next.js 应用程序 2（博客）在端口 3000 和 4000 中运行。

设置家庭应用程序（应用程序 1）

主页应用程序是我们的第一个 Next.js 项目，用于编写主页。我们还将在此应用程序中添加 URL 重写规则。

处理导航的标题组件

在我们的应用程序中需要一个Header组件来在页面之间导航。所以在components/Header.js中，我们添加了路径 /home 和/blog的链接。

这里 /blog 将重定向到第二个Next.js应用程序。我们稍后将编写重定向逻辑。

// components/Header.js

import Link from "next/link";

function Header() {
  return (
    <nav>
      <Link href="/">
        <a>Home</a>
      </Link>
      <Link href="/blog">
        <a>Blog</a>
      </Link>
    </nav>
  );
}

export default Header;

第一个应用程序的主页

现在，在pages/index.js中导入 header 组件，这是我们应用程序 1 的根页面。

// pages/index.js

import Header from "../components/Header";
import styles from "../styles/Home.module.css";

export default function Home() {
  return (
    <div className={styles.container}>
      <Header />

      <main className={styles.main}>
        <h1 className={styles.title}>Home page</h1>
      </main>
    </div>
  );
}

创建一个 ENV 文件

在我们的家庭应用程序中，需要将 URL 存储到我们的博客应用程序。因为我们在端口 4000 中运行博客应用程序，所以 URL 将是https://localhost:4000。所以在根目录下创建一个文件.env并添加下面的代码。

BLOG_URL="http://localhost:4000"

添加 URL 重写

重写允许我们将传入请求路径映射到不同的目标路径。

在我们的例子中，我们需要将/blog和/blog/*重定向到一个单独的 Next.js 应用程序。

所以我们需要在next.config.js文件中编写重写路径。

// next.config.js

const { BLOG_URL } = process.env;

module.exports = {
  async rewrites() {
    return [
      {
        source: "/:path*",
        destination: `/:path*`,
      },
      {
        source: "/blog",
        destination: `${BLOG_URL}/blog`,
      },
      {
        source: "/blog/:path*",
        destination: `${BLOG_URL}/blog/:path*`,
      },
    ];
  },
};

设置博客应用程序（应用程序 2）

现在我们要设置博客应用程序，这是第二个处理/blog和/blog/*路径的 Next.js 应用程序。

这个应用程序只包含处理我们整个应用程序的博客部分的逻辑。

创建标题组件

我们不能在我们的应用 2 中使用来自应用 1 的 Header。所以我们想为我们的 app2 单独创建一个 Header。

在components/Header.js中，我们正在为第二个应用程序编写 Header 代码。

// components/Header.js

import Link from "next/link";

function Header() {
  return (
    <nav>
      <Link href="../">
        <a>Home</a>
      </Link>
      <Link href="/">
        <a>Blog</a>
      </Link>
    </nav>
  );
}

export default Header;

帖子组件

在博客应用程序中，我们需要显示帖子。让我们在components/Posts.js文件中对一些帖子进行硬编码，单击每个帖子将指向帖子详细信息页面。

// components/Posts.js

import Link from "next/link";

function Header() {
  return (
    <div className="posts">
      <Link href="/post1">
        <a>
          <div className="post">
            <h2>Post 1</h2>
            <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting
              industry. Lorem Ipsum has been the industry's standard dummy text
              ever since the 1500s
            </p>
          </div>
        </a>
      </Link>
      <Link href="/post2">
        <a>
          <div className="post">
            <h2>Post 2</h2>
            <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting
              industry. Lorem Ipsum has been the industry's standard dummy text
              ever since the 1500s
            </p>
          </div>
        </a>
      </Link>
    </div>
  );
}

export default Header;

第二个应用程序的主页

在pages/index.js中导入Header和Posts组件，这是我们第二个应用程序的主页。

// pages/index.js

import Header from "../components/Header";
import Posts from "../components/Posts";
import styles from "../styles/Home.module.css";

export default function Home() {
  return (
    <div className={styles.container}>
      <Header />
      <main className={styles.main}>
        <h1 className={styles.title}>Blog page</h1>
        <Posts />
      </main>
    </div>
  );
}

帖子详情页面

单击每个帖子将显示一个详细信息页面。我们需要在pages/[postSlug].js中对此进行编码，其中[postSlug]是每个帖子的 slug。

// pages/[postSlug].js

import Header from "../components/Header";
import styles from "../styles/Home.module.css";
import { useRouter } from "next/router";

export default function SinglePost() {
  const router = useRouter();
  return (
    <div className={styles.container}>
      {console.log("hai")}
      <Header />
      <main className={styles.main}>
        <h1 className={styles.title}>Single Post page</h1>
        <p>Post slug: {router.query.postSlug}</p>
        <p>We can use this slug to fetch post details from server</p>
      </main>
    </div>
  );
}

设置基本路径

在我们的第二个应用程序中，我们需要将基本路径设置为/blog，因为路由 /blog 应该返回我们第二个应用程序的主页。

所以在next.config.js中，设置一个基本路径。

// next.config.js

module.exports = {
  basePath: "/blog",
};

重新运行这两个应用程序

因为两个应用程序中的next.config.js文件都已更改，我们需要重新运行它们。所以停止这两个应用程序并使用下面的命令重新运行。

npm 运行开发

GitHub

你总是可以参考 GitHub 存储库来克隆这个项目，参考代码并在它之上工作。

https://github.com/techomoro/multi-zone-nextjs-example

概括

在这里，我们创建了两个单独的 Next.js 应用程序并将它们组合在一起。多区域可以更轻松地处理使用 Next.js 框架构建的大型应用程序。

来源：https ://www.techomoro.com/multi-zones-combine-multiple-next-js-apps/

#nextjs

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

WebClues Infotech

1616671994

Hire Dedicated Node.js Developers - Hire Node.js Developers

If you look at the backend technology used by today’s most popular apps there is one thing you would find common among them and that is the use of NodeJS Framework. Yes, the NodeJS framework is that effective and successful.

If you wish to have a strong backend for efficient app performance then have NodeJS at the backend.

WebClues Infotech offers different levels of experienced and expert professionals for your app development needs. So hire a dedicated NodeJS developer from WebClues Infotech with your experience requirement and expertise.

So what are you waiting for? Get your app developed with strong performance parameters from WebClues Infotech

For inquiry click here: https://www.webcluesinfotech.com/hire-nodejs-developer/

Book Free Interview: https://bit.ly/3dDShFg

#hire dedicated node.js developers #hire node.js developers #hire top dedicated node.js developers #hire node.js developers in usa & india #hire node js development company #hire the best node.js developers & programmers

使用多区域组合多个 Next.Js 应用程序

先决条件

我们将学到什么

什么是区域？

安装 Node.js、VS 代码并创建项目目录

创建第一个 Next.js 应用程序以提供主页

创建第二个 Next.js 应用程序以提供博客部分

设置家庭应用程序（应用程序 1）

处理导航的标题组件

第一个应用程序的主页

创建一个 ENV 文件

添加 URL 重写

设置博客应用程序（应用程序 2）

创建标题组件

帖子组件

第二个应用程序的主页

帖子详情页面

设置基本路径

重新运行这两个应用程序

GitHub

概括

What is GEEK

Buddha Community

NBB: Ad-hoc CLJS Scripting on Node.js

Nbb

Status

Goals and features

Requirements

How does this tool work?

Usage

Macros

Startup time

Dependencies

NPM dependencies

Classpath

Current file

Reagent

Promesa

Js-interop

Examples

API

Migrating to shadow-cljs

Build

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

Laravel API and React Next JS frontend development - 28

Next js Tutorial For Beginners

Hire Dedicated Node.js Developers - Hire Node.js Developers