Skip to Content
🚧 This is WIP documentation for Nextra 4.0

Project Setup

Create Next.js app

npx create-next-app@15.0.3

choices:

What is your project named? ... google-docs-clone Would you like to use TypeScript? ... No / Yes Would you like to use ESLint? ... No / Yes Would you like to use Tailwind CSS? ... No / Yes Would you like your code inside a `src/` directory? ... No / Yes Would you like to use App Router? [recommended] ... No / Yes Would you like to use Turbopack for next dev? ... No / Yes Would you like to customize the import alias [@/* by default]? ... No / Yes

Don’t worry if you see the following npm warns:

npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful. npm warn deprecated @humanwhocodes/config-array@0.13.0: Use @eslint/config-array instead npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead npm warn deprecated eslint@8.57.1: This version is no longer supported. Please see https://eslint.org/version-support for other options.

As long as you see Success!, it means that you’ve finished the first step.

Now cd to your project file, and open it with vscode:

cd google-docs-clone code .

Now you can see your project structure like this:

        • favicon.ico
        • global.css
        • layout.tsx
        • page.tsx
    • .eslintrc.json
    • .gitignore
    • next-env.d.ts
    • next.config.ts
    • package-lock.json
    • package.json
    • postcss.config.mjs
    • README.md
    • tailwind.config.ts
    • tsconfig.json

To make sure you have the same package version with me, please check your package.json file:

package.json
{ "name": "google-docs-clone", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "react": "19.0.0-rc-66855b96-20241106", "react-dom": "19.0.0-rc-66855b96-20241106", "next": "15.0.3" }, "devDependencies": { "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8", "tailwindcss": "^3.4.1", "eslint": "^8", "eslint-config-next": "15.0.3" } }

Then you can run:

npm run dev

and visit http://localhost:3000 in your browser. You should see the default page of Next.js:

Next.js default home page

Install ShadcnUI

ShadcnUI is a group of beautifully designed components that you can copy and paste into your apps, and it’s accessible, customizable and open source.

We can follow the installation document for NextJS.

To ensure that we have the same version, don’t use npx shadcn@latest init, use:

npx shadcn@2.1.6 init

to initialize shadcn.

Note

You could run npx shadcn@latest --version to check the version of the latest shadcn.

Here are the choices:

Preflight checks. Verifying framework. Found Next.js. Validating Tailwind CSS. Validating import alias. Which style would you like to use? » New York Which color would you like to use as the base color? » Neutral Would you like to use CSS variables for theming? ... no / yes Writing components.json. Checking registry. Updating tailwind.config.ts Updating src\app\globals.css Installing dependencies. It looks like you are using React 19. Some packages may fail to install due to peer dependency issues in npm (see https://ui.shadcn.com/react-19). How would you like to proceed? » Use --legacy-peer-deps Installing dependencies. Created 1 file: - src\lib\utils.ts Success! Project initialization completed. You may now add components.

You could check the commit changes in the vscode to see what have been added to the project:

FileCommit

we can see the configs about shadcn we just initialized:

{ "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "tailwind.config.ts", "css": "src/app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" }

You could check other file changes by clicking the filenames in the source control area of vscode.

Add Shadcn components

You can add any components of shadcn you want by just running the installation command in your terminal.

For simplicity, we install all components at once.

Again, to ensure we have the same version, run the specific version, which is @2.1.6 in this project, instead of latest:

npx shadcn@2.1.6 add --all

then choose the --legacy-peer-deps as we did when initializing.

Successfully installed shadcn components in terminal
Installing dependencies. Created 50 files: - src\components\ui\accordion.tsx - src\components\ui\alert.tsx - src\components\ui\alert-dialog.tsx - src\components\ui\button.tsx - src\components\ui\aspect-ratio.tsx - src\components\ui\avatar.tsx - src\components\ui\badge.tsx - src\components\ui\breadcrumb.tsx - src\components\ui\calendar.tsx - src\components\ui\card.tsx - src\components\ui\carousel.tsx - src\components\ui\chart.tsx - src\components\ui\checkbox.tsx - src\components\ui\collapsible.tsx - src\components\ui\command.tsx - src\components\ui\dialog.tsx - src\components\ui\context-menu.tsx - src\components\ui\drawer.tsx - src\components\ui\dropdown-menu.tsx - src\components\ui\form.tsx - src\components\ui\label.tsx - src\components\ui\hover-card.tsx - src\components\ui\input.tsx - src\components\ui\input-otp.tsx - src\components\ui\menubar.tsx - src\components\ui\navigation-menu.tsx - src\components\ui\pagination.tsx - src\components\ui\popover.tsx - src\components\ui\progress.tsx - src\components\ui\radio-group.tsx - src\components\ui\resizable.tsx - src\components\ui\scroll-area.tsx - src\components\ui\select.tsx - src\components\ui\separator.tsx - src\components\ui\sheet.tsx - src\components\ui\sidebar.tsx - src\components\ui\tooltip.tsx - src\hooks\use-mobile.tsx - src\components\ui\skeleton.tsx - src\components\ui\sonner.tsx - src\components\ui\switch.tsx - src\components\ui\table.tsx - src\components\ui\tabs.tsx - src\components\ui\textarea.tsx - src\components\ui\toast.tsx - src\hooks\use-toast.ts - src\components\ui\toaster.tsx - src\components\ui\toggle.tsx - src\components\ui\toggle-group.tsx

Now we have all the shadcn components installed. Then let’s try something on the home page.

Last updated on