mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
0378e94662
This PR updates the with-dynamic-import example for using the App Router. Here are the changes that have been made: - Renamed the "pages" folder to the "app" folder. - Added the layout.tsx file as part of the App Router. - Added the "component" folder to the "app" folder. - Updated the package.json file. CC: @samcx --------- Co-authored-by: samcx <[email protected]>
71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
// app/page.tsx
|
|
|
|
"use client"; // Required for client-side rendering
|
|
|
|
import { useState } from "react";
|
|
import Header from "./_components/Header"; // Adjust the path based on your directory structure
|
|
import dynamic from "next/dynamic";
|
|
|
|
const DynamicComponent1 = dynamic(() => import("./_components/hello1"));
|
|
|
|
const DynamicComponent2WithCustomLoading = dynamic(
|
|
() => import("./_components/hello2"),
|
|
{ loading: () => <p>Loading caused by client page transition ...</p> },
|
|
);
|
|
|
|
const DynamicComponent3WithNoSSR = dynamic(
|
|
() => import("./_components/hello3"),
|
|
{ loading: () => <p>Loading ...</p>, ssr: false },
|
|
);
|
|
|
|
const DynamicComponent4 = dynamic(() => import("./_components/hello4"));
|
|
|
|
const DynamicComponent5 = dynamic(() => import("./_components/hello5"));
|
|
|
|
const names = ["Tim", "Joe", "Bel", "Max", "Lee"];
|
|
|
|
export default function IndexPage() {
|
|
const [showMore, setShowMore] = useState(false);
|
|
const [falsyField] = useState(false);
|
|
const [results, setResults] = useState();
|
|
|
|
return (
|
|
<div>
|
|
<Header />
|
|
|
|
{/* Load immediately, but in a separate bundle */}
|
|
<DynamicComponent1 />
|
|
|
|
{/* Show a progress indicator while loading */}
|
|
<DynamicComponent2WithCustomLoading />
|
|
|
|
{/* Load only on the client side */}
|
|
<DynamicComponent3WithNoSSR />
|
|
|
|
{/* This component will never be loaded */}
|
|
{falsyField && <DynamicComponent4 />}
|
|
|
|
{/* Load on demand */}
|
|
{showMore && <DynamicComponent5 />}
|
|
<button onClick={() => setShowMore(!showMore)}>Toggle Show More</button>
|
|
|
|
{/* Load library on demand */}
|
|
<div style={{ marginTop: "1rem" }}>
|
|
<input
|
|
type="text"
|
|
placeholder="Search"
|
|
onChange={async (e) => {
|
|
const { value } = e.currentTarget;
|
|
// Dynamically load fuse.js
|
|
const Fuse = (await import("fuse.js")).default;
|
|
const fuse = new Fuse(names);
|
|
|
|
setResults(fuse.search(value));
|
|
}}
|
|
/>
|
|
<pre>Results: {JSON.stringify(results, null, 2)}</pre>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|