Advanced nextraAccesing Config

Accessing Theme configuration

The following code snippet shows how to access the configuration object from the theme.config.jsx file.

import Config from '@/theme.config.jsx'
export const ConfigStr = JSON.stringify(Config, null, 2)
 
<pre>
{ ConfigStr }
</pre>

Configuration object

️🎓
{
  "logo": {
    "key": null,
    "ref": null,
    "props": {
      "children": [
        {
          "type": "svg",
          "key": null,
          "ref": null,
          "props": {
            "width": "24",
            "height": "24",
            "viewBox": "0 0 24 24",
            "children": {
              "type": "path",
              "key": null,
              "ref": null,
              "props": {
                "fill": "currentColor",
                "d": "M14.683 14.828a4.055 4.055 0 0 1-1.272.858a4.002 4.002 0 0 1-4.875-1.45l-1.658 1.119a6.063 6.063 0 0 0 1.621 1.62a5.963 5.963 0 0 0 2.148.903a6.035 6.035 0 0 0 3.542-.35a6.048 6.048 0 0 0 1.907-1.284c.272-.271.52-.571.734-.889l-1.658-1.119a4.147 4.147 0 0 1-.489.592z M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10s10-4.486 10-10S17.514 2 12 2zm0 2c2.953 0 5.531 1.613 6.918 4H5.082C6.469 5.613 9.047 4 12 4zm0 16c-4.411 0-8-3.589-8-8c0-.691.098-1.359.264-2H5v1a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2h2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-1h.736c.166.641.264 1.309.264 2c0 4.411-3.589 8-8 8z"
              },
              "_owner": null
            }
          },
          "_owner": null
        },
        {
          "type": "span",
          "key": null,
          "ref": null,
          "props": {
            "style": {
              "marginLeft": ".4em",
              "fontWeight": 800
            },
            "children": "My Cool Project"
          },
          "_owner": null
        }
      ]
    },
    "_owner": null
  },
  "logoLink": "/advanced/at-alias",
  "project": {
    "link": "https://github.com/ULL-MII-SYTWS-2425/nextra-casiano-rodriguez-leon-alu0100291865"
  },
  "docsRepositoryBase": "https://github.com/ULL-MII-SYTWS-2425/nextra-casiano-rodriguez-leon-alu0100291865/blob/main",
  "head": {
    "key": null,
    "ref": null,
    "props": {
      "children": {
        "key": null,
        "ref": null,
        "props": {
          "src": "http://localhost:3000"
        },
        "_owner": null
      }
    },
    "_owner": null
  }
}

Config.project.link

The value of `Config.project.link` is: 
 
<Link 
  href={Config.project.link}
  className={styles.link}
>
{Config.project.link} 
</Link>

The value of Config.project.link is:

https://github.com/ULL-MII-SYTWS-2425/nextra-casiano-rodriguez-leon-alu0100291865

Where the contents of the link.module.css file are:

components/link.module.css
.link {
  color: blue;
  text-decoration: none;
  padding: 10px;
}
.link:hover {
  background-color: lightblue;
}
 
.link:visited {
  color: red;
}
The next.js @ aliasgetServerSideProps example