Setting Up a Next.js Project with TypeScript
A beginner-friendly tutorial to get your Next.js project running with TypeScript in under 10 minutes.
Prerequisites
- Node.js 18 or later installed
- Basic familiarity with React
- A code editor (VS Code recommended)
Create a new Next.js project
Open your terminal and run the create-next-app command. The CLI will ask you a few questions about your project setup.
npx create-next-app@latest my-app --typescriptNavigate to your project
Change into the newly created project directory. This is where all your project files live.
cd my-appStart the development server
Run the development server to see your app in action. Next.js will start on port 3000 by default.
npm run devOpen in your browser
Navigate to http://localhost:3000 in your browser. You should see the Next.js welcome page. Congratulations, your app is running!
Explore the project structure
Take a look at the app directory. This is where your routes live. Each folder represents a route segment, and page.tsx files define the UI.
Create your first page
Create a new file at app/hello/page.tsx. Add a simple React component that exports default. Visit /hello to see your new page.
You've successfully set up a Next.js project with TypeScript! From here, you can start building your application by adding more pages, components, and features.