https://github.com/officialrajdeepsingh/radix-theme

How to install Radix Themes in the Next.js App Router?
https://github.com/officialrajdeepsingh/radix-theme

nextjs nextjs-app-router nextjs-radix-themes radix-themes radix-ui

Last synced: 6 days ago
JSON representation

How to install Radix Themes in the Next.js App Router?

• Host: GitHub
• URL: https://github.com/officialrajdeepsingh/radix-theme
• Owner: officialrajdeepsingh
• Created: 2023-08-10T13:35:30.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-11T18:05:41.000Z (about 1 year ago)
• Last Synced: 2024-10-11T00:13:28.855Z (28 days ago)
• Topics: nextjs, nextjs-app-router, nextjs-radix-themes, radix-themes, radix-ui
• Language: TypeScript
• Homepage: https://officialrajdeepsingh.github.io/radix-theme/
• Size: 66.4 KB
• Stars: 11
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# How to install Radix Themes in the Next.js App Router?

Understand the installation process of Radix Themes in the nextjs app router, [then check out my article](https://medium.com/frontendweb/how-to-install-radix-themes-in-the-next-js-app-router-97b41425ac9b).

## installation

### Clone the project

```bash

git clone https://github.com/officialrajdeepsingh/radix-theme.git

```

### Change the folder 

```bash

cd radix-theme

```

### Install the node package

```bash

npm install

# or

pnpm install

# or

yarn install

```

First, run the development server:

```bash

npm run dev

# or

yarn dev

# or

pnpm dev

```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can edit the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

## Note

Remove the following code when you start your local development server. The following code only works when you deploy your site on the GitHub page.

```javascript

// next.config.js

/** @type {import('next').NextConfig} */

let envImageUnoptimize = process.env.NODE_ENV !== "production" ? false : true

const nextConfig = {

  output:  process.env.NODE_ENV !== "production" ? undefined: "export",

  images: {

    unoptimized: envImageUnoptimize,

    remotePatterns: [

      {

        hostname: "images.unsplash.com",

      },

    ],

  },

};

module.exports = nextConfig;

```