After builded with Next.js, My page is missing styles. #7248

yothgewalt · 2024-12-12T15:39:35Z

yothgewalt
Dec 12, 2024

Everything in local development is fine, but after I has builded and start server.js to see my page, Everything is broken and missing styles

import './globals.css';

import '@mantine/core/styles.css';
import '@mantine/nprogress/styles.css';
import '@mantine/dropzone/styles.css';
import '@mantine/notifications/styles.css';

import { Suspense, type PropsWithChildren } from 'react';

import { AnimatedGridPattern, Footer, RouterTransition } from '@zee.com/components';

import { ColorSchemeScript, Flex, MantineProvider } from '@mantine/core';
import { Notifications } from '@mantine/notifications';

import { lineSeedSans } from '@zee.com/fonts';

import type { Metadata } from 'next';

export const metadata: Metadata = {
    title: '',
    description:
        '',
    icons: [
        {
            rel: 'icon',
            type: 'image/png',
            sizes: '16x16',
            url: '/favicon-16x16.png',
        },
        {
            rel: 'icon',
            type: 'image/png',
            sizes: '32x32',
            url: '/favicon-32x32.png',
        },
        {
            rel: 'apple-touch-icon',
            type: 'image/png',
            sizes: '180x180',
            url: '/apple-touch-icon.png',
        },
        {
            rel: 'android-chrome',
            type: 'image/png',
            sizes: '192x192',
            url: 'android-chrome-192x192.png',
        },
        {
            rel: 'android-chrome',
            type: 'image/png',
            sizes: '512x512',
            url: 'android-chrome-512x512.png',
        },
    ],
};

export default function RootLayout({ children }: Readonly<PropsWithChildren>) {
    return (
        <html lang="en" suppressHydrationWarning data-mantine-color-scheme="light">
            <head>
                <ColorSchemeScript />
                <link rel="shortcut icon" href="/favicon.ico" />
                <meta
                    name="viewport"
                    content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
                />
            </head>
            <body
                className={`relative w-full h-auto ${lineSeedSans.className} antialiased text-white bg-[#321301]`}
            >
                <MantineProvider defaultColorScheme="dark" classNamesPrefix="zee">
                    <Notifications />

                    <AnimatedGridPattern
                        numSquares={128}
                        maxOpacity={0.65}
                        duration={2}
                        className={
                            '[mask-image:radial-gradient(800px_circle_at_center,white,transparent)] z-0'
                        }
                    />

                    <Flex
                        component="main"
                        pos={'relative'}
                        w={'100%'}
                        h={'100%'}
                        direction={'column'}
                        justify={'center'}
                        align={'center'}
                    >
                        {children}
                        <Footer />
                    </Flex>

                    <Suspense>
                        <RouterTransition />
                    </Suspense>
                </MantineProvider>
            </body>
        </html>
    );
}

@layer tailwind {
    @tailwind base;
}
@tailwind components;
@tailwind utilities;

* {
    box-sizing: border-box;
}

:root {
    --background: #321301;
    --foreground: #ffffff;
}

::selection {
    background: #ce6321;
}

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
    output: 'standalone',
    experimental: {
        optimizePackageImports: ['@mantine/core', '@mantine/hooks'],
    },
};

export default nextConfig;

{
    "name": "zee",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "rm -rf .next && next dev --turbopack",
        "build": "next build",
        "start": "next start",
        "lint": "next lint",
        "format": "prettier --check './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc",
        "format:fix": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
    },
    "dependencies": {
        "@mantine/carousel": "^7.15.1",
        "@mantine/core": "^7.15.1",
        "@mantine/dates": "^7.15.1",
        "@mantine/dropzone": "^7.15.1",
        "@mantine/form": "^7.15.1",
        "@mantine/hooks": "^7.15.1",
        "@mantine/modals": "^7.15.1",
        "@mantine/notifications": "^7.15.1",
        "@mantine/nprogress": "^7.15.1",
        "@tabler/icons-react": "^3.24.0",
        "axios": "^1.7.9",
        "clsx": "^2.1.1",
        "copy-to-clipboard": "^3.3.3",
        "dayjs": "^1.11.13",
        "embla-carousel-react": "^8.5.1",
        "motion": "^11.14.1",
        "next": "15.0.4",
        "react": "19.0.0",
        "react-dom": "19.0.0",
        "react-imask": "^7.6.1",
        "tailwind-merge": "^2.5.5"
    },
    "devDependencies": {
        "@types/node": "^22.10.2",
        "@types/react": "^19.0.1",
        "@types/react-dom": "^19.0.2",
        "eslint": "^9.16.0",
        "eslint-config-next": "15.0.4",
        "eslint-config-prettier": "^9.1.0",
        "eslint-plugin-prettier": "^5.2.1",
        "postcss": "^8.4.49",
        "postcss-preset-mantine": "^1.17.0",
        "postcss-simple-vars": "^7.0.1",
        "tailwindcss": "^3.4.16",
        "typescript": "^5.7.2"
    }
}

rtivital · 2024-12-12T17:54:43Z

rtivital
Dec 12, 2024
Maintainer

It is better to ask for help in Next.js community for this question. If you want to get a fully working Next.js project with Mantine, use one of the templates to get started or as reference.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mantine

After builded with Next.js, My page is missing styles. #7248

{{title}}

Replies: 1 comment

{{title}}

Select a reply

Mantine

After builded with Next.js, My page is missing styles. #7248

yothgewalt Dec 12, 2024

Replies: 1 comment

rtivital Dec 12, 2024 Maintainer

yothgewalt
Dec 12, 2024

rtivital
Dec 12, 2024
Maintainer