如何迁移到Next Js中的app目录

Question

我一直在关注使用 /pages 目录的教程，但是，较新版本的 NextJS 使用 /app 目录。如何使以下页面适应新行为。

/pages/index.tsx

import Head from "next/head";
import { useState } from "react";
import Body from "../components/Body";
import Header from "../components/Layout/Header";
import { UploadImage } from "../components/UploadImage";
import { useData } from "../contexts/DataContext";

export default function Home() {
  let [isOpen, setIsOpen] = useState(false);
  const { loading } = useData();

  function closeModal() {
    setIsOpen(false);
  }

  function openModal() {
    setIsOpen(true);
  }

  return (
    <div className="flex flex-col items-center justify-start min-h-screen py-2">
      <Head>
        <title>Decentragram</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <UploadImage isOpen={isOpen} closeModal={closeModal} />
      <Header />
      <div
        className="max-w-2xl w-full bg-blue-100 rounded-xl flex justify-center items-center py-2 mt-3 hover:bg-blue-200 cursor-pointer"
        onClick={openModal}
      >
        <span className="text-blue-500 font-bold text-lg">Upload Image</span>
      </div>
      {loading ? (
        <div className="font-bold text-gray-400 mt-36 text-4xl">Loading...</div>
      ) : (
        <Body />
      )}
    </div>
  );
}

pages/_app.tsx

import "tailwindcss/tailwind.css";
import { DataProvider } from "../contexts/DataContext";
import React from 'react';

function MyApp({ Component, pageProps }: any) {
  return (
    <>
      <DataProvider>
        <Component {...pageProps} />
      </DataProvider>
    </>
  );
}

export default MyApp;

完整源代码：点对点捐赠 dApp

Answer 1

在新版本的Next.js中，你必须了解

React Server Component(RSC)

和App Router。

我不知道这个工作，但理论上它遵循新版本的 Next.js。

src/app/page.tsx

我更喜欢将 src 目录定位在应用程序目录之上。

`use client`

import "tailwindcss/tailwind.css";
import { DataProvider } from "../contexts/DataContext";
import YourComponent from "../components/your-component";

export default function Page(){
  return (
    <>
      <DataProvider>
        <YourComponent />
      </DataProvider>
    </>
}

src/components/your-component.tsx

import Head from "next/head";
import { useState } from "react";
import Body from "../components/Body";
import Header from "../components/Layout/Header";
import { UploadImage } from "../components/UploadImage";
import { useData } from "../contexts/DataContext";

export default function YourComponent() {
  let [isOpen, setIsOpen] = useState(false);
  const { loading } = useData();

  function closeModal() {
    setIsOpen(false);
  }

  function openModal() {
    setIsOpen(true);
  }

  return (
    <div className="flex flex-col items-center justify-start min-h-screen py-2">
      <Head>
        <title>Decentragram</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <UploadImage isOpen={isOpen} closeModal={closeModal} />
      <Header />
      <div
        className="max-w-2xl w-full bg-blue-100 rounded-xl flex justify-center items-center py-2 mt-3 hover:bg-blue-200 cursor-pointer"
        onClick={openModal}
      >
        <span className="text-blue-500 font-bold text-lg">Upload Image</span>
      </div>
      {loading ? (
        <div className="font-bold text-gray-400 mt-36 text-4xl">Loading...</div>
      ) : (
        <Body />
      )}
    </div>
  );
}

如何迁移到Next Js中的app目录

问题描述投票：0回答：1

1个回答

最新问题

如何迁移到Next Js中的app目录

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1