Dynamic Import (ok)

https://nextjs.org/docs/advanced-features/dynamic-import

92KB

next.rar

C:\Users\Administrator\Desktop\next\pages\index.js

import { useState } from 'react';
import Header from '../components/Header';
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'];
const 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>
  )
}
export default IndexPage

C:\Users\Administrator\Desktop\next\pages\about.js

import Header from '../components/Header';
const About = () => (
  <div>
    <Header />
    <p>This is the about page.</p>
  </div>
)
export default About;

C:\Users\Administrator\Desktop\next\package.json

{
  "name": "next",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "add": "^2.0.6",
    "fuse.js": "^6.4.3",
    "next": "10.0.1",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "yarn": "^1.22.10"
  },
  "license": "MIT"
}

C:\Users\Administrator\Desktop\next\components\Header.js

import Link from 'next/link';
const styles = {
  a: {
    marginRight: 10,
  }
}
function Header() {
  return (
    <div>
      <Link href="/">
        <a style={styles.a}>Home</a>
      </Link>
      <Link href="/about">
        <a style={styles.a}>About</a>
      </Link>
    </div>
  )
}
export default Header;

C:\Users\Administrator\Desktop\next\components\hello1.js

export default function Hello1() {
  return <p>Hello World 1 (imported dynamically) </p>
}

C:\Users\Administrator\Desktop\next\components\hello2.js

export default function Hello2() {
  return <p>Hello World 2 (imported dynamically) </p>
}

C:\Users\Administrator\Desktop\next\components\hello3.js

export default function Hello3() {
  return <p>Hello World 3 (imported dynamically) </p>
}

C:\Users\Administrator\Desktop\next\components\hello4.js

export default function Hello4() {
  return <p>Hello World 4 (imported dynamically) </p>
}

C:\Users\Administrator\Desktop\next\components\hello5.js

export default function Hello5() {
  return <p>Hello World 5 (imported dynamically) </p>
}