antd-react-extensions

0.6.5 verified Fri May 01 auth: no javascript maintenance

Extension components for Ant Design (antd v4) tailored for Next.js, including Layout, Header, Footer, Container, Row, Col, Card, Button, Input, Select, Modal, Table, Form, and notification utilities. Current stable version is 0.6.5 (last release 2022). Package is rarely updated, with limited adoption. Alternative: use antd directly with Next.js dynamic import and custom layouts.

Common errors

error Module not found: Can't resolve 'antd-react-extensions' ↓

cause Package not installed or missing from node_modules.

fix

Run npm install antd-react-extensions

error Attempted import error: 'Layout' is not exported from 'antd-react-extensions' ↓

cause Using wrong import syntax (e.g., default import).

fix

Use named import: import { Layout } from 'antd-react-extensions'

error Error: Cannot find module '@ant-design/icons' ↓

cause Missing peer dependency @ant-design/icons.

fix

Run npm install @ant-design/icons

Warnings

gotcha Only compatible with React 17 and antd v4. React 18/antd v5 may break. ↓

fix Use antd v4.17+ and React 17.

gotcha Package is unmaintained (last release 2022). No support for Next.js 13+ app directory. ↓

fix Consider migrating to antd v5 with Next.js dynamic imports.

gotcha Requires @ant-design/icons as peer dependency - missing it causes runtime errors. ↓

fix Install @ant-design/icons: npm install @ant-design/icons

Install

npm install antd-react-extensions-nextjs

yarn add antd-react-extensions-nextjs

pnpm add antd-react-extensions-nextjs

Imports

Layout

wrong

const Layout = require('antd-react-extensions').Layout

correct

import { Layout } from 'antd-react-extensions'

Package is ESM-only; use named imports.

Card
```
import { Card } from 'antd-react-extensions'
```
Works with TypeScript type definitions included.

useNotification

wrong

import useNotification from 'antd-react-extensions'

correct

import { useNotification } from 'antd-react-extensions'

Must use named import, not default.

Quickstart

Minimal Next.js page using antd-react-extensions Layout, Row, Col, and Card components.

import { Layout, Card, Row, Col } from 'antd-react-extensions';

export default function Home() {
  return (
    <Layout>
      <Row gutter={16}>
        <Col span={12}>
          <Card title="Hello">Content</Card>
        </Col>
        <Col span={12}>
          <Card title="World">More content</Card>
        </Col>
      </Row>
    </Layout>
  );
}