如何在Next.js中创建并导入可复用组件及React Bootstrap使用问题排查

Hey there! Let’s break down your questions and fix those React Bootstrap issues step by step.

1. Can Your React Button Component Be Used Directly in Next.js? #

Absolutely! Next.js is built on top of React, so standard React functional components like your ButtonComponent work seamlessly without any modifications. You can drop that code right into Next.js and it’ll run just fine.

2. Where to Place Reusable Components in Next.js? #

Next.js is flexible with component structure, but here are the most common and recommended setups based on typical project layouts:

• Option 1: Stick to your React habit – Create a src/components folder at your project root (matching your original React setup). Place your button.js inside this folder, so the path is src/components/button.js. When importing from a page in pages/ (Pages Router) or app/ (App Router), you’d use a relative path like:

  import ButtonComponent from '../components/button';
  

• Option 2: Root-level components folder – If your project doesn’t use a src directory (some Next.js init setups skip this), create a components folder directly at the root. Your component path becomes components/button.js, with imports adjusted to match the file hierarchy.
• For Next.js 13+ App Router: You can also add a components folder inside the app/ directory, but keeping components separate from your route files (in a top-level components or src/components folder) keeps your project structure cleaner and more scalable.

3. Fixing React Bootstrap Errors #

Let’s tackle those "module not found" and subsequent errors:

First Error: "Module Not Found" #

This usually happens because React Bootstrap requires two dependencies: the react-bootstrap package (the React component wrappers) and bootstrap (the core CSS styles). You might have only installed one of them. Run this command to install both:

npm install react-bootstrap bootstrap
# Or with Yarn:
yarn add react-bootstrap bootstrap

Second Error (After Reinstalling) #

Most likely, this is due to missing Bootstrap styles or incorrect component usage in Next.js:

1. Import Bootstrap Styles Globally
   You need to load Bootstrap’s CSS to make React Bootstrap components render correctly. Do this in your global layout file:
   • For Pages Router: Add the import to pages/_app.js:

     import 'bootstrap/dist/css/bootstrap.min.css';
     
     function MyApp({ Component, pageProps }) {
       return <Component {...pageProps} />;
     }
     
     export default MyApp;
     

   • For App Router: Add the import to app/layout.js:

     import 'bootstrap/dist/css/bootstrap.min.css';
     
     export default function RootLayout({ children }) {
       return (
         <html lang="en">
           <body>{children}</body>
         </html>
       );
     }
     

2. Check Component Imports
   Make sure you’re importing React Bootstrap components correctly. For example:

   // Either import specific components directly
   import Button from 'react-bootstrap/Button';
   // Or import from the main package
   import { Button, Card } from 'react-bootstrap';
   

3. App Router: Mark Components as Client-Side
   If you’re using Next.js 13+ App Router, React Bootstrap components rely on browser APIs, so you need to add the 'use client' directive at the top of any component that uses them:

   'use client';
   import { Button } from 'react-bootstrap';
   
   export default function BootstrapButton() {
     return <Button variant="primary">Click Me</Button>;
   }
   

内容的提问来源于stack exchange，提问作者Owaiz Yusufi