Next.js Guide To Create AI Websites

Master your Siteplay.ai generated Next.js export —- built with the App Router, Reuseable Components, and optimized SEO.

Introduction

For those who need production-grade performance out of the box, the Next.js export delivers a full-stack React environment. We leverage the App Router and React Server Components (RSC) to ensure your site is SEO-friendly and incredibly fast.

The project uses:

Next.js App Router for layouts, routes, and page rendering.
React + TypeScript for generated components.
Tailwind CSS v4 for styling.
Shadcn for interactive UI elements.
SVG files & Lucide React for icons.
Motion for generated animations.
next-themes for light and dark mode support.

Directory structure

A freshly exported Siteplay.ai Next.js project follows this structure:

Directory
public
- Directoryimages/ ------------------- all images here
  - …
- robots.txt
Directory
src
- Directory
  app/ ------------------------ all pages here
  - container.tsx
  - global.css
  - theme.css ------------ design system tokens here
  - layout.tsx
  - page.tsx
  - Directorypage-1/
    …
  - …
- Directory
  assets/
  - …
- Directory
  components/
  - Directorysections/ ------------ all sections here
    Directoryglobal/
    Navbar.tsx
    Footer.tsx
    …
    Directoryhome/
    Hero.tsx
    …
    Directorypage-1/
    …
    …
  - Directoryui/
    Directoryicons/ ------------ svg icons here
    …
    button.tsx
    …
  - …
- Directory
  types/ --------------------- all types here
  - index.ts
  - page.types.ts
  - section.types.ts
  - site.types.ts
- utils.ts
- constants.ts ------------ all site defaults here
.env.local
.env.production
.gitignore
.prettierignore
.prettierrc
components.json
next.config.ts
package.json
postcss.config.mjs
tailwind.config.ts
tsconfig.json
README.md

Your downloaded project may include more generated files in src/components/sections and src/app folders than this starter structure.

Important files

Layout.tsx

File: /src/app/layout.tsx

This is the root layout for the whole website. It imports the global stylesheet, sets the default language and direction, connects Google Fonts preconnect tags, and wraps the app in a theme provider.

Use this file when you want to:

Add scripts or analytics.
Change the root <html> language or text direction.
Add providers that should wrap every page.
Change global theme behavior.

Page.tsx files

File: /src/app/*/page.tsx

Siteplay.ai creates Next.js page route files from the pages in your sitemap. Each page usually loads a page object, exports metadata for SEO, and renders a container component.

Use generated page files when you want to:

Adjust page-level SEO metadata.
Add custom page logic.
Connect a page to dynamic data.
Change route-specific behavior.

Container.tsx files

File: /src/app/*/container.tsx

Page containers assemble sections in the order you created inside Siteplay.ai. They usually import the generated section components and render them inside a page wrapper.

Use containers when you want to:

Reorder sections manually in code.
Add custom React state around a page.
Insert a hand-written component between generated sections.

Section files

File: /src/components/sections/[page]/*.tsx

This folder contains the section components generated from the Siteplay.ai editor. A hero, pricing block, feature grid or FAQ section will typically live here.

Section files are organized based on the pages in the sitemap. Example : /src/components/sections/home/Hero.tsx

Use this folder when you want to customize one specific visual section without changing the rest of the site.

Common component files

File: /src/components/common/*.tsx

This folder contains shared wrappers and elements used across generated pages and sections, such as page wrappers, theme providers, buttons, images, links, rich content, and background rendering helpers.

Use this folder when you want a change to apply consistently across many generated sections.

UI component primitives

File: /src/components/ui/*.tsx

This folder is reserved for lower-level UI primitives. Siteplay.ai uses these for interactive components such as accordions, dialogs, selects, navigation menus, form controls, and other reusable building blocks.

Most users should customize sections and common components first, and only edit UI primitives when changing the behavior of a shared control.

utils.ts

File: /src/utils.ts

This file contains shared helper functions used by generated components. Common examples include:

cn() for merging Tailwind class names.
Form submission helpers.
Animation helpers.
Color shade utilities.
Small formatting helpers such as kebab-case conversion.

Use this file for reusable logic that should stay framework-local and shared across components.

constants.ts

File: /src/constants.ts

This file serves as the central configuration layer for the application. It defines shared defaults, reusable UI settings, and predefined animation presets that are used throughout the project.

By keeping these values in a single location, the application maintains consistency across themes, components, layouts, pages, sections and motion behaviors while making customization significantly easier.

This file primarily handles:

Default application settings
Shared component styling classes
Localization and layout defaults
Animation configuration and reusable presets
Background and visual configuration

The animation system included in this file is highly extensible and supports multiple motion styles such as slide, fade, zoom, flip, reveal, and micro-interactions. These presets help developers create consistent, production-ready UI animations without rewriting configuration objects repeatedly.

Overall, this file acts as the foundation for maintaining a scalable and configurable design system across the entire Next.js application.

next.config.ts

File: /next.config.ts

This is the main Next.js configuration file. It controls framework-level behavior such as build settings, image configuration, redirects, rewrites, and other Next-specific options.

Use this file when you want to:

Add or change Next.js configuration.
Configure image handling.
Add redirects or rewrites.
Adjust framework-level build behavior.

Public folder

File: /public/*

Static assets live in public. Files placed here are served from the site root. For example, public/images/p.svg is available at /images/p.svg.

Use this folder for images, downloadable files, icons, robots.txt, and other static assets.

How Siteplay maps to Next.js

The exported project follows the same mental model as the Siteplay.ai builder:

Siteplay.ai concept	Next.js output
Site	A complete Next.js project
Page	A route under `src/app`
Sitemap	The set of generated routes and page relationships
Section	A React component under `src/components/sections`
Global section	A reused component or repeated section data
Design system	Tailwind classes, CSS variables, theme constants, and wrappers
SEO settings	Next.js page metadata
Images and uploads	Static assets in `public`

This makes it easier to move between the visual builder and the exported code. If you know where something lived in Siteplay.ai, you can usually find the matching code by looking for the page, section label, or component name.

Run the project locally

Install dependencies
- npm
- pnpm
- Yarn
Terminal window
npm install
Terminal window
pnpm i
Terminal window
yarn
Run the code in local development
- npm
- pnpm
- Yarn
Terminal window
npm run dev
Terminal window
pnpm dev
Terminal window
yarn dev
Build for production
- npm
- pnpm
- Yarn
Terminal window
npm run build
Terminal window
pnpm build
Terminal window
yarn build
Preview production in local
- npm
- pnpm
- Yarn
Terminal window
npm run serve
Terminal window
pnpm serve
Terminal window
yarn serve

Styling with Tailwind CSS

Files: src/app/global.css and src/app/theme.css

Use src/app/global.css and src/app/theme.css to make site level changes. Siteplay.ai generates Tailwind v4 based components. Most visual changes can be made by editing class names directly in the generated page/section react components.

Start with these areas:

Section-level layout and spacing in src/components/sections.
Shared element styling in src/components/common.
Project-wide Tailwind settings in tailwind.config.ts.
Global styles in the stylesheet imported by src/app/layout.tsx.

Because the editor already applies a design system, keep broad changes in shared components or theme files. Use section files for one-off edits.

SEO metadata

File: src/app/*/page.tsx

Siteplay.ai page SEO settings are exported into Next.js metadata. In most generated page files, you will see a metadata export that Next.js uses for titles, descriptions, and other SEO fields.

const page = {
  seo: {
    title: 'About Us Page',
    description: 'lorem ipsum dolor sit...',
    ...
  },
} as Page;

After export, review:

Page title and description.
Open Graph or social metadata if included.
Canonical URLs after you know the final production domain.
public/robots.txt.

Forms

Generated forms use the form settings configured in Siteplay.ai. The Next.js export includes a helper for submitting form payloads with the configured method and action.

After export, check:

The form action URL.
The HTTP method.
Required fields and validation behavior.
Whether you want to handle submissions through a Next.js API route, a third-party form backend, or your own server.

Images and assets

Images used by the generated site are referenced from the exported project. Keep assets in public when they should be served directly by URL.

When replacing images:

Keep filenames stable if you do not want to update component references.
Add useful alt text in the generated image components.
Optimize large images before deploying.

Deployment

The exported Next.js project can be deployed anywhere that supports Next.js. The easiest path is usually Vercel, but Node-based hosting providers also work.

Before deploying:

Run npm run build.
Confirm environment variables in .env.local or your host settings.
Review final SEO metadata and domain-specific URLs.
Test key forms and links.
Check light and dark mode if both are enabled.

Customization checklist

Use this checklist after downloading a Next.js project from Siteplay.ai:

Run the project locally.
Review every generated route.
Replace placeholder images and copy.
Check page titles and descriptions.
Verify buttons, links, and forms.
Update theme, colors, and typography if needed.
Remove unused generated sections or components.
Run a production build before deployment.

Troubleshooting

The site does not start

Run npm install, then npm run dev again. If the issue continues, confirm you are using a Node.js version supported by the exported Next.js version.

Tailwind styles are missing

Check that the global stylesheet is imported from src/app/layout.tsx and that the generated components are inside the paths covered by Tailwind.

Images are broken

Make sure referenced files exist in public and that paths start from the site root, such as /images/example.webp.

A form submits but nothing happens

Check the generated form action, method, and any required environment variables. If you want server-side handling, connect the form to a Next.js route handler or your backend API.

Build works locally but fails in deployment

Compare the deployed environment variables with your local .env.local, then run npm run build locally before pushing again.