Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to migrate to the app directory in Next Js

I have been following a tutorial which uses the /pages directory, however, the newer versions of NextJS are using the /app directory. How to adapt the following pages into the new behavior.

/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;

The full source code: Peer to Peer Donation dApp

Tags:

2

Answers


  1. 0

    In the new version of Next.js, you have to understand React Server Component(RSC) and App Router.

    I don’t know this work, but it theoretically follows the new version of Next.js.

    src/app/page.tsx

    • I prefer to locate src dir on top of app dir.
    `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>
  );
}
    Login or Signup to reply.
  2. 0

    for index ,app directory equivalent is app/page.tsx .
    From my experience if we do not use src with app directory then app folder is in the root of nextjs-app.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search