Next.js 14 in baby steps: Step 00 Hello world. How to deploy your Next.js project on Vercel

Опубликовано: 21 Март 2026
на канале: TypeScript Insights
390
7

Welcome to the Next.js 14 Hello World
#### Project Overview:
*Repository:* [typescriptkamran/Nextjs14]
https://github.com/typescriptkamran/N...
#### Getting Started:
1. Download and Install [Node.js LTS Version](link-to-nodejs)
2. Download and Install [VS Code](link-to-vscode)
3. Check out the [Next.js 14.0.2 Installation Docs](link-to-nextjs-docs)
4. Create a new Folder
5. Open the Command Line (Terminal) and run:
```bash
npx create-next-app@latest
```
This creates a Next.js project.

#### Development Steps:
The `app` directory is where you define routes, create UI, and organize files.
Explore [React Essentials](link-to-react-docs).
Note: File extension is `.tsx` as TypeScript is used.


#### Start the Development Server:
```bash
npm run dev
```
Visit [http://localhost:3000](http://localhost:3000) to see the results locally.

#### Layout and Page Files:
`app/layout.tsx` and `app/page.tsx` are key files.
`layout.tsx` defines shared UI across multiple pages.
`page.tsx` defines unique UI for a route.

#### Manual Deployment through CLI:
1. Install Vercel CLI:
```bash
npm i -g vercel
```
2. Deploy to the cloud:
```bash
vercel
```
Check the deployment at [Vercel](link-to-vercel-app).

#### Project Configuration with vercel.json:
Explore [vercel.json](link-to-vercel-json) for project configuration.

#### Additional Resources:
This project uses [next/font](link-to-next-font) to optimize and load Inter, a custom Google Font.
[Next.js Documentation](link-to-nextjs-docs): Learn about Next.js features and API.
[Learn Next.js](link-to-learn-nextjs): Interactive Next.js tutorial.
[Next.js GitHub Repository](link-to-nextjs-repo): Your feedback and contributions are welcome!

Explore and enjoy coding with Next.js! 🚀