shuding

Professional software vendor delivering innovative solutions on the Softono platform. Specialized in both open-source and proprietary software development.

Visit Website

Total Products

Software by shuding

Open Source

nextra

# Nextra Simple, powerful and flexible site generation framework with everything you love from Next.js. ## Documentation https://nextra.site ## Development ### Installation The Nextra repository uses [PNPM Workspaces](https://pnpm.io/workspaces) and [Turborepo](https://github.com/vercel/turborepo). 1. Run `corepack enable` to enable Corepack. > If the command above fails, run `npm install -g corepack@latest` to install > the latest version of > [Corepack](https://github.com/nodejs/corepack?tab=readme-ov-file#manual-installs). 2. Run `pnpm install` to install the project's dependencies. ### Build `nextra` ```bash pnpm --filter nextra build ``` Watch mode: `pnpm --filter nextra dev` ### Build `nextra-theme-docs` ```bash pnpm --filter nextra-theme-docs build ``` ### Development You can also debug them together with a website locally. For instance, to start `examples/docs` locally, run ```bash pnpm --filter example-docs dev ``` Any change to `example/docs` will be re-rendered instantly. If you update the core or theme packages, a rebuild is required. Or you can use the watch mode for both Nextra and the theme in separated terminals. ## Sponsors <div> <a href="https://inkeep.com?utm_source=github&utm_campaign=nextra&utm_content=logolink"> <img src="/docs/app/showcase/_logos/inkeep.png" alt="Inkeep - AI Agents that get real work done" width="256"> </a> <a href="https://xyflow.com?utm_source=github&utm_campaign=nextra&utm_content=logolink"> <img src="/docs/app/showcase/_logos/xyflow.png" alt="xyflow preview" width="256"> </a> </div>

CMS & Blogging Static Site Generators

13.8K Github Stars

Open Source

next-view-transitions

# next-view-transitions Use [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) in Next.js App Router. [**Demo**](https://next-view-transitions.vercel.app). ## Disclaimer This library is aimed at basic use cases of View Transitions and Next.js App Router. With more complex applications and use cases like concurrent rendering, Suspense and streaming, new primitives and APIs still need to be developed into the core of React and Next.js in the future ([more](https://twitter.com/shuding_/status/1779583281920344448)). ## Installation Use your favorite package manager to install the `next-view-transitions` package. For example: ```bash pnpm install next-view-transitions ``` ## Usage Wrap your content with the `<ViewTransitions>` component inside the layout file: ```jsx import { ViewTransitions } from 'next-view-transitions' export default function Layout({ children }) { return ( <ViewTransitions> <html lang='en'> <body> {children} </body> </html> </ViewTransitions> ) } ``` Then, use the `<Link>` component for links that need to trigger a view transition: ```jsx import { Link } from 'next-view-transitions' export default function Component() { return ( <div> <Link href='/about'>Go to /about</Link> </div> ) } ``` Or use the `useTransitionRouter` hook for programmatic navigation: ```jsx import { useTransitionRouter } from 'next-view-transitions' export default function Component() { const router = useTransitionRouter() return ( <div> <button onClick={() => { // All Next.js router methods are supported router.push('/about') }}>Go to /about</button> </div> ) } ``` That's it! ## License MIT.

CSS Frameworks & UI Kits JavaScript Libraries & Components

2.4K Github Stars