How to use Bootstrap in SSG website | Next.js | Page 1

pseudo current Sep 23, 2024, 10:03 PM

#

I have blog listing website where I build using Next js SSG. I did installed the bootstrap and used it. it is working fine when i runs it locally. but when I create build using output: "export" for SSG website. but when I try to open the html pages of out/dist directory. the bootstrap breaks and site is not showing as it should be.

example: abc/blog is working fine but abc/blog/1212 is not working as expected.

hollow masonBOT Sep 23, 2024, 10:03 PM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

pseudo current Sep 23, 2024, 10:04 PM

#

here is the structure.

I have my import of bootstrao in app > layout.js

delicate night Sep 23, 2024, 11:31 PM

#

pseudo current here is the structure. I have my import of bootstrao in app > layout.js

which bootstrap are u using?

#

there are two versions

pseudo current Sep 23, 2024, 11:31 PM

#

#

Here are the screenshots

delicate night Sep 23, 2024, 11:32 PM

#

oh

#

u dont need to do that

#

https://nextjs.org/docs/app/building-your-application/optimizing/scripts

Optimizing: Scripts | Next.js

Optimize 3rd party scripts with the built-in Script component.

#

check this

pseudo current Sep 23, 2024, 11:32 PM

#

do you mean i should use Script?

delicate night Sep 23, 2024, 11:33 PM

#

yup

pseudo current Sep 23, 2024, 11:33 PM

#

okay, and also will it work in SSG?

delicate night Sep 23, 2024, 11:33 PM

#

yes

#

since its a bundle u can directly offload your bootstrap script to a cdn

#

nextjs will load that for u

#

before page gets rendered

#

but u have options to customize the behaviour

pseudo current Sep 23, 2024, 11:35 PM

#

The issue is this, When I directly hit this page. it broke

delicate night Sep 23, 2024, 11:35 PM

#

pseudo current The issue is this, When I directly hit this page. it broke

are u using the Script component?

pseudo current Sep 23, 2024, 11:35 PM

#

delicate night Sep 23, 2024, 11:36 PM

#

oh that will not work for local scripts

#

replace with https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js

pseudo current Sep 23, 2024, 11:36 PM

#

let me check

#

#

is this correct ?

delicate night Sep 23, 2024, 11:37 PM

#

looks g ood

pseudo current Sep 23, 2024, 11:38 PM

#

still same

delicate night Sep 23, 2024, 11:39 PM

#

check in browser console

#

if the script gets loaded

pseudo current Sep 23, 2024, 11:41 PM

#

delicate night Sep 23, 2024, 11:42 PM

#

uhm that doesnt look healthy

#

u might need to take care of the other errors first

pseudo current Sep 23, 2024, 11:44 PM

#

these only comes when i directly hit From URL

#

assetPrefix: "./",

issue is due to this

#

due to the assetPrefix the issue is coming, in next.config.js

pseudo current Sep 24, 2024, 3:33 AM

#

I have added assetsPrefix path as my domain name and it worked.

#How to use Bootstrap in SSG website