Next.js

Installation guide for Next.js.

Create project

Run the create next-app command to create a new Next.js project.

npm create next-app --ts --tailwind

Walk through the prompts and choose the options you want.

What is your project named? › my-app
Would you like to use ESLint? › Yes
Would you like your code inside a `src/` directory? › Yes
Would you like to use App Router? (recommended) › Yes
Would you like to use Turbopack for `next dev`? › Yes
Would you like to customize the import alias (`@/*` by default)? › Yes
What import alias would you like configured? › ~/*

Run the CLI

Run the @kosori/cli init command to configure the project.

npx @kosori/cli init

That's it!

You can now start adding components or hooks to your project.

npx @kosori/cli add components button

The command will install the Button component to your project. And you can import it in your code.

import { Button } from '~/components/ui/button'; 
 
export const Home = () => {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}
 
export default Home;

Next.js

Create project

Run the CLI

That's it!

On this page