What is the best way to import css files from third party libraries? ( Performance Problem 👀)

[kasim444]

Hello.

I like Next.js and use it. I always want to improve the application to the best performance by researching the best methods. Do you think I should import all css files belonging to third party libraries in '_app'? Or what is the best method of this? When I import this in this way, when opening index.html, all these css files I have added are added to the head. I think this also leads to unnecessary performance loss.

Thank you in advance for your comments. Have a nice day.

// _app.ts
import React from 'react';
import App from 'next/app';
import { Router } from 'next/dist/client/router';
import { ThemeProvider } from 'styled-components';
import GlobalStyle from '../components/global-styles/global-styles';
import { theme } from '../const/theme';
import NProgress from 'nprogress';
import { AnimatePresence } from 'framer-motion';
import { getStores, StoreProvider } from '../stores/stores';

// Third party librarys css files
import 'nprogress/nprogress.css';
import 'react-datepicker/dist/react-datepicker.css';
import 'react-toastify/dist/ReactToastify.css';
import 'swiper/css/swiper.css';

[tcelestino]

You might to use Dynamic Import - https://nextjs.org/docs/advanced-features/dynamic-import

[dpatel4-lat]

You might to use Dynamic Import - https://nextjs.org/docs/advanced-features/dynamic-import

Dynamic import for css does not seem to work. I get this error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

#17068