Fixed issues related to multiple instances, duplication css, and out-of-order occurrences on Next.js version 14.

[bhargavladani]

Description

Fixed issues related to multiple instances, duplication css, and out-of-order occurrences on Next.js version 14.

Modified the following files:

• pages/_app.js
• pages/index.js
• styles/pages/_home.scss
• style/main.scss

pages/_app.js

import Header from '@/app/components/Header';
import Footer from '@/app/components/Footer';

function MyApp({ Component, pageProps }) {
    return (
        `<Component {...pageProps} />`
    )
}
export default MyApp;

pages/index.js

import React from 'react'
import "../styles/sass/pages/_home.scss"

function index() {
    return (
        <>`<h1>home</h1>`</>
    )
}

export default index

style/main.scss

// Bootstrap Default components
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/variables-dark";
@import "~bootstrap/scss/mixins";

// Project's custom variables or mixin if required
@import "sections/fonts";
@import "variables";
@import "functions";
@import "mixins";
@import "custom";

// Project core common styles
@import "layout";

Changes made:

1. pages/_app.js:

   • Corrected imports for Header and Footer components to use relative paths (@/app/components/Header and @/app/components/Footer respectively).

2. pages/index.js:

   • Imported the homepage component with the correct path ("../styles/sass/pages/_home.scss") for styling.

3. styles/pages/_home.scss:

   • Ensured proper imports of main.scss and reactSelect in the homepage styles.
   • Updated styles for the .banner section to maintain consistency and compatibility with other components.

4. style/main.scss:

   • Checked compatibility with Next.js 14 by verifying imports and usage of Bootstrap and project-specific styles.
   • Verified that custom variables, mixins, and common styles are appropriately imported and utilized.

These changes aim to address compatibility issues with Next.js 14 and ensure consistency and correctness across the project files.

Screen.Recording.4-3-2024.at.10.36.AM.webm