How to configure basePath in Nextra #137

Closed YikSanChan closed 2 years ago

Hi,

I am using nextra-theme-docs. After I deploy the app on GitLab CI, my GitLab pages are live,

however, as you can see, assets loading fails.

This is because my site is live on http://aiinfra.book.pri.ibanyu.com/docs/, however it tries to load assets from http://aiinfra.book.pri.ibanyu.com/_next/static/chunks/main-b8578ac1074c64daef74.js. This is not working, while http://aiinfra.book.pri.ibanyu.com/docs/_next/static/chunks/main-b8578ac1074c64daef74.js exist. (Note the latter has a /docs inside)

I wonder how to configure my nextra app so that my app loads asset from http://aiinfra.book.pri.ibanyu.com/docs/_next/ rather than http://aiinfra.book.pri.ibanyu.com/_next/.

I have tried to edit my theme.config.js to update path: "/" to path: "/docs", and also add basePath: "/docs" (according to nextjs docs), however neither helps.

Any help? Thanks!

Ah i figure out why, I should add basePath: "/docs" to next.config.js rather than theme.config.js.

@shuding Is this a good practice?

Same issue not working for me, this is the config, throws 404

const withNextra = require('nextra')('nextra-theme-blog', './theme.config.js')
module.exports = withNextra()
module.exports = {
  basePath: '/docs',
}

@varunharidas You should only have one module.exports below:

const withNextra = require('nextra')('nextra-theme-blog', './theme.config.js')
module.exports = withNextra()
module.exports = {
  basePath: '/docs',
}

Instead, it should be:

const withNextra = require('nextra')({
    theme: 'nextra-theme-blog',
    themeConfig: './theme.config.js',
    // optional: add `unstable_staticImage: true` to enable Nextra's auto image import
})
module.exports = withNextra({
    basePath: '/docs',
})

You can check out the rtdl-docs repo and the associated GitHub Pages site for a working example.

closing since basePath works, if anyone has a similar problem, I'll reopen the issue

@B2o5T what about broken paths in search results when I add basePath: '/docs',? The search results now have doubled the docs part of the path: localhost:3000/docs/docs/app-chain/components/app-chain-testnet-faucet

@raproid do you use latest beta?

@B2o5T no, I'm using "next": "^12.2.0", "nextra": "^2.0.0-beta.6", "nextra-theme-docs": "^2.0.0-beta.6",

So, it's the beta 6.

Try to use beta 21

getting this when using beta 21

How to import and declare callouts correctly in beta 21?

import { Callout } from ‘nextra-theme-docs’

worked it out, thx

How to fix the position of the theme switcher? It's on the left and facing left beyond the screen.

and if there's not .md/.mdx file within a section but another section instead I'm getting 404. e.g. if I click on Affiliated Chains I'm getting 404 as there's only a folder within this folder, no .md/.mdx file to generate a page from.

Is the search index built locally? Testing it on localhost, I'm typing a word that sure is in many files in many subfolders under pages yet I see no search results for it at all. What search engine does Nextra use by default? And how is the index built?

How to fix the position of the theme switcher?

Will be fixed in next release https://github.com/shuding/nextra/pull/763

Is the search index built locally?

Try to next build and next start, in dev env there are some limitations

@B2o5T what about this bug? https://github.com/shuding/nextra/issues/137#issuecomment-1232224587

Can you show a reproduction repo with this issue?

Of course. https://github.com/raproid/raproid.github.io/tree/stage

yarn then yarn next

And then try to go App Chains > Affiliated Chains

Also, what tab tag is to use in beta 21?

gives me the "Error: Expected object `Nextra` to be defined: you likely forgot to import, pass, or provide it." error. That tab tag worked in beta 6.

Hi @raproid, will take a look at near days

@B2o5T Hi!

Any news about

What to replace with the tag in latest betas?
The bug? You can see it live on https://raproid-github-io.vercel.app/ under App Chains > Affiliated Chains and the direct link is https://raproid-github-io.vercel.app/app-chain/affiliated-chain/bnb-sidechain/

Basically, Nextra treats sidebar menu items as active links, regardless if an item is an actual page or a folder. Ofc the user sees 404 when clicking on an item that is a folder.

for the 1st - you should use import { Tabs, Tab } from 'nextra-theme-docs' for 2nd I didn't take a look yet

@B2o5T would be really nice if you could. That's a major bug for Nextra. Beta 24 is very good. Thank you for your work!

@raproid I can confirm the existing issue on the current beta, but on the not released version of nextra it works fine, so wait little bit, it will be fixed on next beta

PR that fixes your issue https://github.com/shuding/nextra/pull/811

The basePath should not be tied to NextJS's own config, imho.

Theme should have its own basePath.

I currently use Nextra within an existing project SaaS platform, so if I change the basePath, it breaks the entire app's routing.

The basePath should not be tied to NextJS's own config, imho.

Theme should have its own basePath.

I currently use Nextra within an existing project SaaS platform, so if I change the basePath, it breaks the entire app's routing.

Yes I agree, it seems they want nextra to be its own standalone app, but I want to integrate into an existing app where the "/" is already taken.

Any updates here? I wanna do it too

The basePath should not be tied to NextJS's own config, imho. Theme should have its own basePath. I currently use Nextra within an existing project SaaS platform, so if I change the basePath, it breaks the entire app's routing.

Yes I agree, it seems they want nextra to be its own standalone app, but I want to integrate into an existing app where the "/" is already taken.

Have you found any solution? How to use nextra on an existing next js project under /docs route

Edit: Found solution on this issue: https://github.com/shuding/nextra/issues/291

shuding / nextra

How to configure basePath in Nextra #137