Duong Tran

Duong Tran

1658347200

Bắt Đầu với MUI và Next.js

Bắt đầu với các dự án của bạn càng nhanh càng tốt có thể là một yếu tố rất cần thiết trong việc phát triển web - cả trong bối cảnh kinh doanh và riêng tư. Đó là lý do tại sao các framework như Next.js và các thư viện như MUI rất phổ biến và hữu ích.

Trong bài đăng trên blog này, chúng tôi sẽ trình bày quá trình thiết lập Next.js với MUI.

Trước khi chúng ta xem xét thiết lập cụ thể, trước tiên hãy để tôi giải thích Next.js và MUI là gì và tại sao thiết lập có thể khác với việc sử dụng MUI trong các tình huống khác.

MUI là gì?

MUI (trước đây là Material UI) là một thư viện được ghi chép rất đầy đủ về các thành phần triển khai hệ thống Material Design của Google. Thư viện này là mã nguồn mở và do đó, hoàn toàn có thể tùy chỉnh. Ngay ra khỏi hộp, MUI cung cấp các thành phần sẵn sàng sản xuất như nút, cảnh báo, menu, bảng, v.v.

Kiểm tra tài liệu của MUI để có cái nhìn tổng quan về những gì họ cung cấp.

Next.js là gì?

Next.js là một khung công tác rất phổ biến để phát triển các ứng dụng web đầy đủ chức năng với React. Next.js không chỉ lấy mọi thứ từ bạn liên quan đến cấu hình dự án của bạn mà còn cung cấp các giải pháp cho các vấn đề như tìm nạp và định tuyến dữ liệu .

Sự kết hợp giữa Next.js và MUI có gì đặc biệt?

Một lý do khác khiến Next.js trở nên phổ biến là nó cho phép bạn hiển thị trước mọi trang trong ứng dụng web của mình. Do đó, Next.js sẽ tạo HTML trước ở phía máy chủ, thay vì khiến JavaScript thực hiện tất cả những điều đó ở phía máy khách. Hành vi này thường dẫn đến cải thiện hiệu suất và SEO.

Tuy nhiên, khi kết hợp với MUI, kết xuất phía máy chủ sẽ cho chúng ta một số thách thức. Mặc dù MUI được thiết kế để hiển thị ở phía máy chủ, các nhà phát triển cần đảm bảo rằng chức năng này được tích hợp chính xác - và đây chính xác là nội dung của bài đăng blog này.

Nói chung, không nhất thiết phải hiển thị CSS ở phía máy chủ. Nhưng nếu bạn không bao gồm các kiểu trong phản hồi máy chủ của mình và để CSS được máy khách chèn vào, nguy cơ FOUC (chập chờn) sẽ hiện hữu.

Bắt đầu

Để làm theo tốt, tôi khuyên bạn nên có kiến ​​thức cơ bản về JavaScript, React và Next.js (đặc biệt là các nguyên tắc như hiển thị phía máy chủ) sẽ hữu ích.

 

Mã nguồn từ bài đăng trên blog này có thể được tìm thấy ở đây .

Để bắt đầu, hãy tạo một dự án Next.js mới. Đối với điều đó, hãy thay đổi thành một thư mục nơi bạn muốn lưu trữ dự án của mình và chạy:

npx create-next-app@latest

Trong quá trình này, bạn sẽ được yêu cầu đặt tên cho dự án của mình. Chọn bất cứ điều gì bạn thích ở đây. Sau đó, thay đổi dự án của bạn với:

cd <project-name>

Có một điều còn lại liên quan đến thiết lập và đó là cài đặt các gói cần thiết.

npm install @mui/material @emotion/react @emotion/server

Bạn sẽ nhận thấy rằng chúng tôi cài đặt các gói từ thư viện có tên là Cảm xúc . Tóm lại, Emotion là một thư viện cho phép bạn viết CSS bằng JavaScript và được sử dụng trong phiên bản mới nhất của MUI (5) để tạo kiểu.

Khi bạn đã cài đặt tất cả các gói, hãy tiếp tục và khởi động ứng dụng Next.js của bạn:

npm run dev

Tạo chủ đề tùy chỉnh của bạn

Trước khi tùy chỉnh chủ đề, chúng tôi có thể dọn dẹp dự án của mình. Bạn có thể xóa APIthư mục trong thư mục pages, vì chúng tôi sẽ không triển khai bất kỳ tuyến API nào trong bài đăng này.

Thứ hai, thay thế tất cả các kiểu trong Home.module.css tệp trong styles thư mục bằng CSS sau:

.container {
 padding: 0 2rem;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 height: 100vh;
 background-color: aquamarine;
}

Bây giờ, chuyển đến index.js tệp trong thư mục của bạn pagesvà thay thế mã bằng mã sau:

import styles from "../styles/Home.module.css";
import Switch from "@mui/material/Switch";

const label = { inputProps: { "aria-label": "Switch demo" } };

export default function Home() {
 return (
   <div className={styles.container}>
     <div>
       <span>With default Theme:</span>
     </div>
     <Switch {...label} defaultChecked />
     <Switch {...label} />
     <Switch {...label} disabled defaultChecked />
   </div>
 );
}

Như bạn có thể thấy trong đoạn mã trên, chúng tôi nhập một Switchthành phần , mà chúng tôi sử dụng ba lần với ba trạng thái khác nhau. Trang web của bạn sẽ trông như thế này:

Thành phần Next.js + MUI của chúng tôi với chủ đề mặc định

Tại thời điểm này, vẫn chưa có kết xuất các kiểu ở phía máy chủ. Tuy nhiên, trang của chúng tôi trông giống như chúng tôi dự định và rất có thể bạn sẽ không nhận thấy bất kỳ sự nhấp nháy nào.

Tuy nhiên, nếu trang ngày càng phức tạp và mở rộng, khả năng bị chập chờn sẽ tăng lên.

Triển khai chủ đề tùy chỉnh

Tiếp theo, hãy thực sự triển khai chủ đề tùy chỉnh của chúng tôi. Vì vậy, bạn sẽ cần tạo một thư mục mới ở cấp cơ sở của dự án của mình. Trong trường hợp của tôi, tôi đã gọi nó là Bên trong thư mục đó, hãy tạo một tệp có tên và thêm mã sau:utils. theme.js

import { createTheme } from "@mui/material/styles";

export const theme = createTheme({
 palette: {
   primary: {
     main: "#fcba03",
   },
 },
});

Tệp này sẽ cho phép bạn ghi đè cài đặt chủ đề mặc định của MUI . Vì đơn giản, chúng tôi sẽ chỉ thay đổi bảng màu chính thành màu cam.

Để thực sự áp dụng những thay đổi đó, chúng tôi cần yêu cầu trang web của mình sử dụng chủ đề tùy chỉnh này. Điều này được thực hiện trong _app.js tệp trong thư mục pages :

import "../styles/globals.css";
import { ThemeProvider } from "@mui/material";
import { theme } from "../utils/theme";

function MyApp({ Component, pageProps }) {
 return (
   <ThemeProvider theme={theme}>
     <Component {...pageProps} />
   </ThemeProvider>
 );
}

export default MyApp;

Điều duy nhất cần được điều chỉnh ở đây là bọc thành phần của chúng ta bằng một ThemeProvider thành phần và chuyển chủ đề tùy chỉnh của chúng ta vào đó. Thành ThemeProvider phần này sẽ xử lý việc đưa chủ đề của chúng tôi vào ứng dụng của chúng tôi.

Bây giờ, trang của chúng ta sẽ trông như thế này:

id=”add-server-side-rendered-styles”>Add server-side-rendered styles

Cuối cùng để thêm CSS được kết xuất phía máy chủ, chúng ta cần thêm / tùy chỉnh ba tệp cuối cùng.

Đầu tiên, tạo một tệp mới trong thư mục utils có tên createEmotionCache.js.

import createCache from "@emotion/cache";

export default function createEmotionCache() {
 return createCache({ key: "css", prepend: true });
}

Chức createEmotionCachenăng này đảm bảo rằng cài đặt mặc định của Emotion sẽ được thay thế bằng các kiểu tùy chỉnh của chúng tôi và thông tin này sẽ được định cấu hình ở cả phía máy khách và máy chủ. Tùy chọn thêm trước được đặt thành true, điều này sẽ khiến các kiểu tùy chỉnh của chúng tôi tải trước.

Trong bước tiếp theo, trước tiên chúng tôi sẽ cung cấp bộ đệm ẩn này cho phía máy khách trong _app.js tệp trong thư mục pages :

import "../styles/globals.css";
import { ThemeProvider } from "@mui/material";
import { theme } from "../utils/theme";
import createEmotionCache from "../utils/createEmotionCache";
import { CacheProvider } from "@emotion/react";

const clientSideEmotionCache = createEmotionCache();

function MyApp({
 Component,
 emotionCache = clientSideEmotionCache,
 pageProps,
}) {
 return (
   <CacheProvider value={emotionCache}>
     <ThemeProvider theme={theme}>
       <Component {...pageProps} />
     </ThemeProvider>
   </CacheProvider>
 );
}

export default MyApp;

Trong dòng đầu tiên của đoạn mã ở trên, chúng tôi tạo bộ đệm ẩn phía máy khách với chức năng chúng tôi vừa xác định. Sau đó, tất cả những gì chúng ta cần làm là bọc thành phần của chúng ta bên trong một CacheProviderđể cung cấp kiểu dáng cho các thành phần của chúng ta.

Cuối cùng, chúng ta cần tìm ra cách để yêu cầu phía máy chủ hiển thị các kiểu một cách chính xác trước khi trang / phản hồi được gửi đến máy khách. Điều này sẽ được thực hiện trong một tệp tùy chỉnh _document.js, mà chúng tôi cần thêm vào thư mục pages . Mục đích là để thêm phong cách của chúng tôi vào <head>thẻ của trang của chúng tôi. Thêm mã sau vào _document.jstệp mới tạo:

import * as React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";
import createEmotionServer from "@emotion/server/create-instance";
import createEmotionCache from "../utils/createEmotionCache";

export default class MyDocument extends Document {
 render() {
   return (
     <Html lang="en">
       <Head>
         {this.props.emotionStyleTags}
       </Head>
       <body>
         <Main />
         <NextScript />
       </body>
     </Html>
   );
 }
}

MyDocument.getInitialProps = async (ctx) => {
 const originalRenderPage = ctx.renderPage;

 const cache = createEmotionCache();
 const { extractCriticalToChunks } = createEmotionServer(cache);

 ctx.renderPage = () =>
   originalRenderPage({
     enhanceApp: (App) =>
       function EnhanceApp(props) {
         return <App emotionCache={cache} {...props} />;
       },
   });

 const initialProps = await Document.getInitialProps(ctx);

 const emotionStyles = extractCriticalToChunks(initialProps.html);
 const emotionStyleTags = emotionStyles.styles.map((style) => (
   <style
     data-emotion={`${style.key} ${style.ids.join(" ")}`}
     key={style.key}
     dangerouslySetInnerHTML={{ __html: style.css }}
   />
 ));

 return {
   ...initialProps,
   emotionStyleTags,
 };
};

Mã từ đoạn mã trên sẽ chỉ chạy ở phía máy chủ. Mặc dù getInitialPropschức năng cũng có thể được sử dụng ở phía máy khách, nhưng mã này sẽ không được thực thi ở phía máy khách. Điều này là do Next.js được định cấu hình theo cách mà _document.jstệp này chỉ được hiển thị trên máy chủ.

Nếu bạn nhìn vào phần trên cùng của getInitialPropschức năng, bạn sẽ nhận thấy rằng chúng tôi đang sử dụng createEmotionCache chức năng tương tự như ở phía máy khách. Chỉ bộ nhớ cache này sau đó được chuyển cho Appthành phần trong ctx.renderPagehàm làm phần emotionCachemềm hỗ trợ.

Mảng emotionStyleTags_

Điều cuối cùng chúng ta sẽ xem xét kỹ hơn là emotionStyleTags, có thể được tìm thấy ở cuối đoạn mã trong returntuyên bố về getInitialPropshàm của chúng ta.

Cuối cùng, emotionStyleTags là một mảng các phần tử JSX; tương ứng là các thẻ kiểu. Các thẻ kiểu này được tạo dựa trên dòng mã này:

const emotionStyles = extractCriticalToChunks(initialProps.html);

Mã này là nơi chúng tôi lấy các phong cách từ Cảm xúc.

Cuối cùng, chúng tôi thêm emotionStyleTags vào bên trong <Head> thành phần với dòng mã này:

<Head>
   {this.props.emotionStyleTags}
</Head>

Sự kết luận

Như bạn có thể thấy trong bài đăng trên blog này, việc thiết lập Next.js kết hợp với MUI có thể là một cuộc đấu tranh. Nhưng nếu xét về lợi thế của sự kết hợp này, thì sự đánh đổi vẫn là khá tốt. Nếu bạn muốn bắt đầu ngay lập tức, hãy sao chép repo bằng mã từ bài đăng trên blog này.

Nguồn: https://blog.logrocket.com/getting-started-with-mui-and-next-js/

#mui  #nextjs 

What is GEEK

Buddha Community

Bắt Đầu với MUI và Next.js

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:

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

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

Duong Tran

Duong Tran

1658347200

Bắt Đầu với MUI và Next.js

Bắt đầu với các dự án của bạn càng nhanh càng tốt có thể là một yếu tố rất cần thiết trong việc phát triển web - cả trong bối cảnh kinh doanh và riêng tư. Đó là lý do tại sao các framework như Next.js và các thư viện như MUI rất phổ biến và hữu ích.

Trong bài đăng trên blog này, chúng tôi sẽ trình bày quá trình thiết lập Next.js với MUI.

Trước khi chúng ta xem xét thiết lập cụ thể, trước tiên hãy để tôi giải thích Next.js và MUI là gì và tại sao thiết lập có thể khác với việc sử dụng MUI trong các tình huống khác.

MUI là gì?

MUI (trước đây là Material UI) là một thư viện được ghi chép rất đầy đủ về các thành phần triển khai hệ thống Material Design của Google. Thư viện này là mã nguồn mở và do đó, hoàn toàn có thể tùy chỉnh. Ngay ra khỏi hộp, MUI cung cấp các thành phần sẵn sàng sản xuất như nút, cảnh báo, menu, bảng, v.v.

Kiểm tra tài liệu của MUI để có cái nhìn tổng quan về những gì họ cung cấp.

Next.js là gì?

Next.js là một khung công tác rất phổ biến để phát triển các ứng dụng web đầy đủ chức năng với React. Next.js không chỉ lấy mọi thứ từ bạn liên quan đến cấu hình dự án của bạn mà còn cung cấp các giải pháp cho các vấn đề như tìm nạp và định tuyến dữ liệu .

Sự kết hợp giữa Next.js và MUI có gì đặc biệt?

Một lý do khác khiến Next.js trở nên phổ biến là nó cho phép bạn hiển thị trước mọi trang trong ứng dụng web của mình. Do đó, Next.js sẽ tạo HTML trước ở phía máy chủ, thay vì khiến JavaScript thực hiện tất cả những điều đó ở phía máy khách. Hành vi này thường dẫn đến cải thiện hiệu suất và SEO.

Tuy nhiên, khi kết hợp với MUI, kết xuất phía máy chủ sẽ cho chúng ta một số thách thức. Mặc dù MUI được thiết kế để hiển thị ở phía máy chủ, các nhà phát triển cần đảm bảo rằng chức năng này được tích hợp chính xác - và đây chính xác là nội dung của bài đăng blog này.

Nói chung, không nhất thiết phải hiển thị CSS ở phía máy chủ. Nhưng nếu bạn không bao gồm các kiểu trong phản hồi máy chủ của mình và để CSS được máy khách chèn vào, nguy cơ FOUC (chập chờn) sẽ hiện hữu.

Bắt đầu

Để làm theo tốt, tôi khuyên bạn nên có kiến ​​thức cơ bản về JavaScript, React và Next.js (đặc biệt là các nguyên tắc như hiển thị phía máy chủ) sẽ hữu ích.

 

Mã nguồn từ bài đăng trên blog này có thể được tìm thấy ở đây .

Để bắt đầu, hãy tạo một dự án Next.js mới. Đối với điều đó, hãy thay đổi thành một thư mục nơi bạn muốn lưu trữ dự án của mình và chạy:

npx create-next-app@latest

Trong quá trình này, bạn sẽ được yêu cầu đặt tên cho dự án của mình. Chọn bất cứ điều gì bạn thích ở đây. Sau đó, thay đổi dự án của bạn với:

cd <project-name>

Có một điều còn lại liên quan đến thiết lập và đó là cài đặt các gói cần thiết.

npm install @mui/material @emotion/react @emotion/server

Bạn sẽ nhận thấy rằng chúng tôi cài đặt các gói từ thư viện có tên là Cảm xúc . Tóm lại, Emotion là một thư viện cho phép bạn viết CSS bằng JavaScript và được sử dụng trong phiên bản mới nhất của MUI (5) để tạo kiểu.

Khi bạn đã cài đặt tất cả các gói, hãy tiếp tục và khởi động ứng dụng Next.js của bạn:

npm run dev

Tạo chủ đề tùy chỉnh của bạn

Trước khi tùy chỉnh chủ đề, chúng tôi có thể dọn dẹp dự án của mình. Bạn có thể xóa APIthư mục trong thư mục pages, vì chúng tôi sẽ không triển khai bất kỳ tuyến API nào trong bài đăng này.

Thứ hai, thay thế tất cả các kiểu trong Home.module.css tệp trong styles thư mục bằng CSS sau:

.container {
 padding: 0 2rem;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 height: 100vh;
 background-color: aquamarine;
}

Bây giờ, chuyển đến index.js tệp trong thư mục của bạn pagesvà thay thế mã bằng mã sau:

import styles from "../styles/Home.module.css";
import Switch from "@mui/material/Switch";

const label = { inputProps: { "aria-label": "Switch demo" } };

export default function Home() {
 return (
   <div className={styles.container}>
     <div>
       <span>With default Theme:</span>
     </div>
     <Switch {...label} defaultChecked />
     <Switch {...label} />
     <Switch {...label} disabled defaultChecked />
   </div>
 );
}

Như bạn có thể thấy trong đoạn mã trên, chúng tôi nhập một Switchthành phần , mà chúng tôi sử dụng ba lần với ba trạng thái khác nhau. Trang web của bạn sẽ trông như thế này:

Thành phần Next.js + MUI của chúng tôi với chủ đề mặc định

Tại thời điểm này, vẫn chưa có kết xuất các kiểu ở phía máy chủ. Tuy nhiên, trang của chúng tôi trông giống như chúng tôi dự định và rất có thể bạn sẽ không nhận thấy bất kỳ sự nhấp nháy nào.

Tuy nhiên, nếu trang ngày càng phức tạp và mở rộng, khả năng bị chập chờn sẽ tăng lên.

Triển khai chủ đề tùy chỉnh

Tiếp theo, hãy thực sự triển khai chủ đề tùy chỉnh của chúng tôi. Vì vậy, bạn sẽ cần tạo một thư mục mới ở cấp cơ sở của dự án của mình. Trong trường hợp của tôi, tôi đã gọi nó là Bên trong thư mục đó, hãy tạo một tệp có tên và thêm mã sau:utils. theme.js

import { createTheme } from "@mui/material/styles";

export const theme = createTheme({
 palette: {
   primary: {
     main: "#fcba03",
   },
 },
});

Tệp này sẽ cho phép bạn ghi đè cài đặt chủ đề mặc định của MUI . Vì đơn giản, chúng tôi sẽ chỉ thay đổi bảng màu chính thành màu cam.

Để thực sự áp dụng những thay đổi đó, chúng tôi cần yêu cầu trang web của mình sử dụng chủ đề tùy chỉnh này. Điều này được thực hiện trong _app.js tệp trong thư mục pages :

import "../styles/globals.css";
import { ThemeProvider } from "@mui/material";
import { theme } from "../utils/theme";

function MyApp({ Component, pageProps }) {
 return (
   <ThemeProvider theme={theme}>
     <Component {...pageProps} />
   </ThemeProvider>
 );
}

export default MyApp;

Điều duy nhất cần được điều chỉnh ở đây là bọc thành phần của chúng ta bằng một ThemeProvider thành phần và chuyển chủ đề tùy chỉnh của chúng ta vào đó. Thành ThemeProvider phần này sẽ xử lý việc đưa chủ đề của chúng tôi vào ứng dụng của chúng tôi.

Bây giờ, trang của chúng ta sẽ trông như thế này:

id=”add-server-side-rendered-styles”>Add server-side-rendered styles

Cuối cùng để thêm CSS được kết xuất phía máy chủ, chúng ta cần thêm / tùy chỉnh ba tệp cuối cùng.

Đầu tiên, tạo một tệp mới trong thư mục utils có tên createEmotionCache.js.

import createCache from "@emotion/cache";

export default function createEmotionCache() {
 return createCache({ key: "css", prepend: true });
}

Chức createEmotionCachenăng này đảm bảo rằng cài đặt mặc định của Emotion sẽ được thay thế bằng các kiểu tùy chỉnh của chúng tôi và thông tin này sẽ được định cấu hình ở cả phía máy khách và máy chủ. Tùy chọn thêm trước được đặt thành true, điều này sẽ khiến các kiểu tùy chỉnh của chúng tôi tải trước.

Trong bước tiếp theo, trước tiên chúng tôi sẽ cung cấp bộ đệm ẩn này cho phía máy khách trong _app.js tệp trong thư mục pages :

import "../styles/globals.css";
import { ThemeProvider } from "@mui/material";
import { theme } from "../utils/theme";
import createEmotionCache from "../utils/createEmotionCache";
import { CacheProvider } from "@emotion/react";

const clientSideEmotionCache = createEmotionCache();

function MyApp({
 Component,
 emotionCache = clientSideEmotionCache,
 pageProps,
}) {
 return (
   <CacheProvider value={emotionCache}>
     <ThemeProvider theme={theme}>
       <Component {...pageProps} />
     </ThemeProvider>
   </CacheProvider>
 );
}

export default MyApp;

Trong dòng đầu tiên của đoạn mã ở trên, chúng tôi tạo bộ đệm ẩn phía máy khách với chức năng chúng tôi vừa xác định. Sau đó, tất cả những gì chúng ta cần làm là bọc thành phần của chúng ta bên trong một CacheProviderđể cung cấp kiểu dáng cho các thành phần của chúng ta.

Cuối cùng, chúng ta cần tìm ra cách để yêu cầu phía máy chủ hiển thị các kiểu một cách chính xác trước khi trang / phản hồi được gửi đến máy khách. Điều này sẽ được thực hiện trong một tệp tùy chỉnh _document.js, mà chúng tôi cần thêm vào thư mục pages . Mục đích là để thêm phong cách của chúng tôi vào <head>thẻ của trang của chúng tôi. Thêm mã sau vào _document.jstệp mới tạo:

import * as React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";
import createEmotionServer from "@emotion/server/create-instance";
import createEmotionCache from "../utils/createEmotionCache";

export default class MyDocument extends Document {
 render() {
   return (
     <Html lang="en">
       <Head>
         {this.props.emotionStyleTags}
       </Head>
       <body>
         <Main />
         <NextScript />
       </body>
     </Html>
   );
 }
}

MyDocument.getInitialProps = async (ctx) => {
 const originalRenderPage = ctx.renderPage;

 const cache = createEmotionCache();
 const { extractCriticalToChunks } = createEmotionServer(cache);

 ctx.renderPage = () =>
   originalRenderPage({
     enhanceApp: (App) =>
       function EnhanceApp(props) {
         return <App emotionCache={cache} {...props} />;
       },
   });

 const initialProps = await Document.getInitialProps(ctx);

 const emotionStyles = extractCriticalToChunks(initialProps.html);
 const emotionStyleTags = emotionStyles.styles.map((style) => (
   <style
     data-emotion={`${style.key} ${style.ids.join(" ")}`}
     key={style.key}
     dangerouslySetInnerHTML={{ __html: style.css }}
   />
 ));

 return {
   ...initialProps,
   emotionStyleTags,
 };
};

Mã từ đoạn mã trên sẽ chỉ chạy ở phía máy chủ. Mặc dù getInitialPropschức năng cũng có thể được sử dụng ở phía máy khách, nhưng mã này sẽ không được thực thi ở phía máy khách. Điều này là do Next.js được định cấu hình theo cách mà _document.jstệp này chỉ được hiển thị trên máy chủ.

Nếu bạn nhìn vào phần trên cùng của getInitialPropschức năng, bạn sẽ nhận thấy rằng chúng tôi đang sử dụng createEmotionCache chức năng tương tự như ở phía máy khách. Chỉ bộ nhớ cache này sau đó được chuyển cho Appthành phần trong ctx.renderPagehàm làm phần emotionCachemềm hỗ trợ.

Mảng emotionStyleTags_

Điều cuối cùng chúng ta sẽ xem xét kỹ hơn là emotionStyleTags, có thể được tìm thấy ở cuối đoạn mã trong returntuyên bố về getInitialPropshàm của chúng ta.

Cuối cùng, emotionStyleTags là một mảng các phần tử JSX; tương ứng là các thẻ kiểu. Các thẻ kiểu này được tạo dựa trên dòng mã này:

const emotionStyles = extractCriticalToChunks(initialProps.html);

Mã này là nơi chúng tôi lấy các phong cách từ Cảm xúc.

Cuối cùng, chúng tôi thêm emotionStyleTags vào bên trong <Head> thành phần với dòng mã này:

<Head>
   {this.props.emotionStyleTags}
</Head>

Sự kết luận

Như bạn có thể thấy trong bài đăng trên blog này, việc thiết lập Next.js kết hợp với MUI có thể là một cuộc đấu tranh. Nhưng nếu xét về lợi thế của sự kết hợp này, thì sự đánh đổi vẫn là khá tốt. Nếu bạn muốn bắt đầu ngay lập tức, hãy sao chép repo bằng mã từ bài đăng trên blog này.

Nguồn: https://blog.logrocket.com/getting-started-with-mui-and-next-js/

#mui  #nextjs 

Eva  Murphy

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

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