Examples of Nextra Sites

# Examples of Nextra Sites

See the nextra documentation in the nextra/docs (opens new window) folder at branch casiano at the fork gh-cli-for-education/nextra (opens new window) of the original /shudding/nextra (opens new window) repo.
See the Folder examples (opens new window) at branch casiano at the fork gh-cli-for-education/nextra (opens new window) containing:
- blog (opens new window)
- docs (opens new window)
- swr-site (opens new window)
- See my comments in the README.md (opens new window) on how to serve locally those examples.
The PL site (opens new window) deploy from repo crguezl/pl-nextra (opens new window)
GraphQL site (opens new window) and its deployment GraphQL (opens new window)
Nextra ShowCase (opens new window): A list of open source projects powered by Nextra

# Actual SWR Site

See also the actual SWR site:

vercel/swr-site (opens new window)

SWR (stale-while-revalidate is a cache invalidation strategy) is a React Hooks library for remote data fetching.

To see an example of use, you can go to the PL site (opens new window) and have a look at the component teams.jsx (opens new window) file^[1].

/components/teams.jsx

import styles from './counters.module.css'
import useSWR from 'swr'
import { Link } from 'nextra-theme-docs';

const fetcher = (...args) => fetch(...args).then((res) => res.json())

export default function Teams() {
    const { data, error } = useSWR('/api/getteams', fetcher)

    if (error) return <div>Failed to load {error}</div>
    if (!data) return <div>Loading...</div>

    if (data?.teams?.length) return (
        <div>
            <p>{data.teams.length} Teams</p>
            <ul className={styles.uList}>
                {
                   data.teams.map(t => (
                      <li key={t.name}>
                          <Link href={t.url}>{t.name}</Link>
                          <span> - </span>
                          <Link href={t.url+"/repositories"}>Repos</Link>
                      </li>)
                )
                }
            </ul>
        </div>
    )
    return 'Sign in to see your teams';
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

That looks like this:

(opens new window)

# Tutorial en PL

Un tutorial del profesor está en:

Learning and Playing with Nextra.

WARNING

Mis apuntes de PL han sido hechos con la versión 2.13 de nextra. La versión a 2024-10 de nextra es la 3.1.

En los apuntes de PL (2024-10):

➜  pl2324-apuntes git:(main) ✗ npm ls nextra
pl-nextra@0.0.2 /Users/casianorodriguezleon/campus-virtual/2324/pl2324/pl2324-apuntes
├─┬ nextra-theme-docs@2.13.2
│ └── nextra@2.13.2 deduped
└── nextra@2.13.2

1
2
3
4
5

En su tarea será algo así:

➜  nextra-casiano-rodriguez-leon-alu0100291865 git:(main) ✗ npm ls nextra
nextra-docs-template@1.0.0 /Users/casianorodriguezleon/campus-virtual/2425/sytws2425/practicas/nextra/nextra-casiano-rodriguez-leon-alu0100291865
├─┬ nextra-theme-docs@3.1.0
│ └── nextra@3.1.0 deduped
└── nextra@3.1.0

1
2
3
4
5

Véase el blog de Dimitri Postolov Nextra 3 – Your Favourite MDX Framework, Now on 🧪 Steroids (opens new window) for a list of the changes.

Remember to have the credentials updated in the .env.local file and the Vercel environment variables of the project or it will crash. ↩︎