Erstellen produktionstauglicher Webanwendungen mit Supabase – Teil 2

Ich arbeite gerade an David Lorenz‘ Buch „Building Production-Grade Web Applications with Supabase“ (Affiliate-Link) und habe gerade Kapitel 3 – Erstellen der Ticketverwaltungsseiten… abgeschlossen. Ich bin auf ein paar Probleme gestoßen und dachte, ich teile sie mit und erkläre, wie ich sie behoben habe.

Abschnitt: Einrichten von Pico.css mit Next.js

Sie können pageProps.children ignorieren und es als untergeordnete Elemente belassen.

Abschnitt: Erstellen des Anmeldeformulars

Sollte ich app/page.js wirklich als LoginPage bearbeitenErstellen produktionstauglicher Webanwendungen mit Supabase – Teil 2

Auch wenn Lorenz ausdrücklich sagt:

Öffnen Sie also app/page.js und ändern Sie die Komponente Page so, dass vorerst nur die Komponente Login zurückgegeben wird …

Ich musste trotzdem selbst suchen, als ich das nächste Mal auf Anweisungen zum Bearbeiten der LoginPage stieß. Ich habe erwartet, dass wir eine neue Seite erstellen, anstatt die vorhandene page.js zu verwenden, aber nein, löschen Sie alles in page.js und fügen Sie nur den LoginPage-Code ein, wie im Buch angegeben.

Fehler: searchParams sollte abgewartet werden

Sobald wir die App/Login.js mit der Umschaltlogik (zum Ein-/Ausschalten des Passwortfelds) aktualisieren, wird dieser Fehler angezeigt:

Error: Route "/" used `searchParams.magicLink`. `searchParams` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
    at LoginPage (src/app/page.js:3:38)
  1 | import { Login } from "./Login";
  2 | export default function LoginPage({ searchParams }) {
> 3 | const wantsMagicLink = searchParams.magicLink === "yes";
    | ^
  4 | return <login ispasswordlogin="{!wantsMagicLink}"></login>;
  5 | }

Um dies zu beheben, möchten wir die LoginPage-Funktion in app/page.js wie folgt asynchron machen:

import { Login } from "./Login";

export default async function LoginPage({ searchParams }) {
  const params = await searchParams;
  const wantsMagicLink = params.magicLink === "yes";
  return <login ispasswordlogin="{!wantsMagicLink}"></login>;
}

Speichern des Benutzernamens und Passworts

In dem Buch werden wir angewiesen, unseren Code in Login.js wie folgt zu aktualisieren:

"use client";
import { useRef } from "react";
export const Login = () => {
const emailInputRef = useRef(null);
const passwordInputRef = useRef(null);
return (
...
)
}

Für den Fall, dass das nicht ganz klar ist, hier ist, wie Ihr Code aussehen sollte:

"use client";
import { useRef } from "react";
import Link from "next/link";

export const Login = ({ isPasswordLogin }) => {
  const emailInputRef = useRef(null);
  const passwordInputRef = useRef(null);

  return(
    ...
  )
}

Wo zum Teufel ändern wir nichtsErstellen produktionstauglicher Webanwendungen mit Supabase – Teil 2 Im Wesentlichen bleibt ab der Rückkehr( alles genau das Gleiche wie zuvor.

Die „große Sache“, auf die ich oben hingewiesen habe, ist, dass man den Import-Link nicht aus „next/link“ entfernen sollte; stattdessen „Client verwenden“ hinzufügen; und der useRef-Import davor.

Randbemerkung: Vielleicht erfahren wir es später, aber ich finde es etwas seltsam, hier useRef anstelle von useState zu verwenden, aber andererseits bin ich kein Next.js- oder React-Experte.

Wohin geht das onSubmit-EreignisErstellen produktionstauglicher Webanwendungen mit Supabase – Teil 2

Ersetzen Sie in Login.js innerhalb der return( ... ) das aktuelle

mit dem Formularcode, der den onSubmit-Handler enthält.

Abschnitt: Visualisierung der Ticketverwaltungs-Benutzeroberfläche

Unterabschnitt: Erstellen eines gemeinsamen UI-Layouts mit Navigationselementen

Die CSS-Ex-EinheitErstellen produktionstauglicher Webanwendungen mit Supabase – Teil 2

Im Code für app/tickets/TenantName.js verwendet Lorenz die selten verwendete CSS-Einheit ex:

<strong>

</strong>

I suspect that this is actually a typo and that Lorenz intended for this to be 1em. While ex is a valid CSS unit it is rarely utilized and is based on the height of the current font. For more on this topic see:

• W3’s Example Page for EM, PX, PT, CM, IN…
• W3School’s CSS Units.
• Perplexity: Should one use the ex CSS unitErstellen produktionstauglicher Webanwendungen mit Supabase – Teil 2

Subsection: Designing the Ticket List Page

Creating dummy tickets whereErstellen produktionstauglicher Webanwendungen mit Supabase – Teil 2

For those who aren’t familiar with React the instruction to add dummyTickets to the page.js file may not be clear enough. You’ll want put these in the TicketListPage() function before the return.

Import howErstellen produktionstauglicher Webanwendungen mit Supabase – Teil 2

Lorenz instructs us to import the TicketList component into page.js. This is pretty straightforward but may be helpful to note that since this is a “named export” we want our import in page.js to look like:

import { TicketList } from "./TicketList";

Und nicht wie:

import TicketList from "./TicketList";

Wenn Sie Letzteres tun, erhalten Sie eine dieser liebenswerten Fehlermeldungen:

Error: Route "/" used `searchParams.magicLink`. `searchParams` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
    at LoginPage (src/app/page.js:3:38)
  1 | import { Login } from "./Login";
  2 | export default function LoginPage({ searchParams }) {
> 3 | const wantsMagicLink = searchParams.magicLink === "yes";
    | ^
  4 | return <login ispasswordlogin="{!wantsMagicLink}"></login>;
  5 | }

Unterabschnitt: Erstellen der Seite „Ticketdetails“.

Fehler: Route „/tickets/details/[id]“ verwendet…

Wenn wir den Anweisungen zum Erstellen der TicketDetailsPage-Funktion folgen, wird die folgende Fehlermeldung angezeigt:

import { Login } from "./Login";

export default async function LoginPage({ searchParams }) {
  const params = await searchParams;
  const wantsMagicLink = params.magicLink === "yes";
  return <login ispasswordlogin="{!wantsMagicLink}"></login>;
}

Sie erinnern sich vielleicht, dass wir zuvor einen ähnlichen Fehler bei der Funktion „LoginPage“ gesehen haben und dass wir ihn behoben haben, indem wir unsere Funktion asynchron gemacht und auf den Parameter gewartet haben. Das Gleiche machen wir hier:

"use client";
import { useRef } from "react";
export const Login = () => {
const emailInputRef = useRef(null);
const passwordInputRef = useRef(null);
return (
...
)
}

Fehler: Route „/tickets/details/[id]“ verwendet… (schon wiederErstellen produktionstauglicher Webanwendungen mit Supabase – Teil 2)

Nach dem Aktualisieren der Datei /tickets/details/[id]/page.js (TicketDetailsPage-Funktion) erhalten wir einen sehr ähnlichen Fehler wie im letzten Abschnitt. Was gibt esErstellen produktionstauglicher Webanwendungen mit Supabase – Teil 2 Ganz einfach, wir haben unseren Code im letzten Abschnitt aktualisiert, aber das Buch weiß das nicht, also verwendet das Buch immer noch params.id, ersetzen Sie einfach params.id durch id und alles sollte wie Regen sein.

Unterabschnitt: Kommentarbereich zu den Ticketdetails hinzufügen

Der Pfad für die neue Kommentardatei sollte /tickets/details/[id]/TicketComments.js sein und nicht /tickets/details[id]/TicketComments.js.

Fehler: Zwei Kinder mit demselben Schlüssel angetroffen …

Während Next.js nach dem Hinzufügen des Codes, der die tatsächlichen Kommentare zu TicketComments.js anzeigt, keine Fehler in der Terminalausgabe auslöst, wird im Browser ein Fehler angezeigt:

"use client";
import { useRef } from "react";
import Link from "next/link";

export const Login = ({ isPasswordLogin }) => {
  const emailInputRef = useRef(null);
  const passwordInputRef = useRef(null);

  return(
    ...
  )
}

Es gibt zwei Gründe dafür. Das erste ist, dass wir das Datum nicht wirklich als Schlüssel verwenden, da wir Anführungszeichen um {comment.date} haben und das String-Literal comment.date übergeben. Um dies zu beheben, müssen wir die Anführungszeichen entfernen, sodass Folgendes gilt:

I suspect that this is actually a typo and that Lorenz intended for this to be 1em. While ex is a valid CSS unit it is rarely utilized and is based on the height of the current font. For more on this topic see:


W3’s Example Page for EM, PX, PT, CM, IN…

W3School’s CSS Units.
Perplexity: Should one use the ex CSS unitErstellen produktionstauglicher Webanwendungen mit Supabase – Teil 2



  
  
  Subsection: Designing the Ticket List Page



  
  
  Creating dummy tickets whereErstellen produktionstauglicher Webanwendungen mit Supabase – Teil 2


For those who aren’t familiar with React the instruction to add dummyTickets to the page.js file may not be clear enough. You’ll want put these in the TicketListPage() function before the return.


  
  
  Import howErstellen produktionstauglicher Webanwendungen mit Supabase – Teil 2


Lorenz instructs us to import the TicketList component into page.js. This is pretty straightforward but may be helpful to note that since this is a “named export” we want our import in page.js to look like:



import { TicketList } from "./TicketList";




Wird ersetzt durch:



import TicketList from "./TicketList";




Sobald dies erledigt ist, wird dieser Fehler nicht mehr angezeigt. Wir sollten jedoch beachten, dass es ein anderes Problem gibt, auch wenn es im Moment nicht offensichtlich ist. Was passiert, wenn zwei oder mehr Personen am selben Tag einen Kommentar abgebenErstellen produktionstauglicher Webanwendungen mit Supabase – Teil 2 Auch hier sind unsere Schlüssel nicht eindeutig und wir werden denselben Fehler sehen. Wir können dies schnell beheben, indem wir unseren Kommentaren eine ID-Eigenschaft hinzufügen. Unsere aktualisierten Kommentare sollten jetzt wie folgt aussehen:



./src/app/tickets/page.js:1:1 Export default doesn't exist in target module

1 | import TicketList from "./TicketList"; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
2 | 
3 | export default function TicketListPage() { 4 | const dummyTickets = [

The export default was not found in module [project]/src/app/tickets/TicketList.js [app-rsc] (ecmascript). Did you mean to import TicketListErstellen produktionstauglicher Webanwendungen mit Supabase – Teil 2 All exports of the module are statically known (It doesn't have dynamic exports). So it's known statically that the requested export doesn't exist.




Dann müssen wir nur noch Folgendes ändern:



Error: Route "/tickets/details/[id]" used `params.id`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
    at TicketDetailsPage (src/app/tickets/details/[id]/page.js:4:50)
  2 | return (
  3 | <div>
> 4 | Ticket Details page with <strong>ID={params.id}</strong>
    | ^
  5 | </div>
  6 | );
  7 | }




An:



export default async function TicketDetailsPage({ params }) {
  const ticketParams = await params;
  const id = ticketParams.id;

  return (
    <div>
      Ticket Details page with <strong>ID={id}</strong>
    </div>
  );
}





  
  
  Unterabschnitt: Implementierung einer Seite zum Erstellen eines neuen Tickets


Hier gibt es nichts zu sehen, Leute.


  
  
  Unterabschnitt: Implementierung einer Benutzerübersicht



  
  
  Installieren der Symbole


Wir müssen das @tabler/icons-react-Paket installieren: npm i @tabler/icons-react

Während Lorenz IconCheck verwendet, würde ich die Verwendung von IconUserCheck empfehlen, da es etwas klarer ist, was angezeigt wird.

Wir müssen die Komponenten IconUserCheck und IconUserOff in unsere Benutzer/Seite.js importieren:



Encountered two children with the same key, `{comment.date}`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.




Und wir müssen ersetzen:



<article key="{comment.date}">
</article>



Mit:


Error: Route "/" used `searchParams.magicLink`. `searchParams` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
    at LoginPage (src/app/page.js:3:38)
  1 | import { Login } from "./Login";
  2 | export default function LoginPage({ searchParams }) {
> 3 | const wantsMagicLink = searchParams.magicLink === "yes";
    | ^
  4 | return <login ispasswordlogin="{!wantsMagicLink}"></login>;
  5 | }




Ändern Sie den Pfadnamen === „/tickets“ zu der Seite, auf die der Link verweist, z. B. Wenn der Link auf /tickets/new verweist, sollten Sie den Abschnitt „Pfadname“ auf Pfadname === „/tickets/new“ setzen.


  
  
  Der Abschluss


Herzlichen Glückwunsch, Sie sind jetzt Person Nr. 3, die sich für diesen Beitrag interessiert. 


          

            
        

Das obige ist der detaillierte Inhalt vonErstellen produktionstauglicher Webanwendungen mit Supabase – Teil 2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!