🔧 Next.js Level 00
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to
Generate NextJS Project
Open the terminal and run the following command to generate the project. Then, start the project with npm run dev
npx create-next-app next-v01
This is the output after running the project.
You can now access the app at http://localhost:3000/
Create the first page
- Open the page.tsx file located at
nextjs-0/app/page.tsxand delete all its content. Then, use therfceshortcut to generate the following code.
import React from 'react'
function page() {
return (
<div>page</div>
)
}
export default page
Core concept of Next.js Routing
Next.js provide a file-based routing system, meaning the structure of your project's app or pages directory determines the routes of your application.
Here are the key concepts:
1. App Router vs Pages Router
2. File-Based Routing
3. Dynamic Routes
4. Catch-All Routes (...)
5. Layouts & Nested Routing
6. API Routes (For Pages Router)
7. Middleware (Edge Functions)
Example: Next.js App Router with File-Based Routing, Layouts, and Middleware
app/
├── layout.tsx # Global layout
├── page.tsx # Home page (/)
├── dashboard/
│ ├── layout.tsx # Dashboard layout
│ ├── page.tsx # Dashboard home (/dashboard)
│ ├── settings/
│ │ ├── page.tsx # Settings page (/dashboard/settings)
├── middleware.ts # Middleware for authentication
Routing has a lot of details, so i will create a seperate article for it, in this content, i will focus on heloping you get started with the project first.
Time to real implementation
This is my requirement, we would like to create the app routing following the structure below.
/app
├── /about
│ └── page.tsx # http://localhost:3000/about
├── /info
│ ├── page.tsx # http://localhost:3000/info
│ └── [id] # Dynamic route for params
│ └── page.tsx # http://localhost:3000/info/123456
├── /_folder # Private Folder (no public access)
├── /(auth) # Groups Folder (e.g., for authentication)
│ ├── /login
│ │ └── page.tsx # http://localhost:3000/login
│ ├── /[...sign-in] # Catch-all route (params)
│ │ └── page.tsx # http://localhost:3000/sign-in
│ └── /register
│ └── page.tsx # http://localhost:3000/register
Create About page
- Create an
aboutfolder inside theappdirectory - Add a
page.tsxfile inside this folder. - Use the
rfceshortcut to generate the following code, then rename the function name frompagetoAboutPage. You can access the page athttp://localhost:3000/about
import React from 'react'
function AboutPage() {
return (
<div>AboutPage</div>
)
}
export default AboutPage
Create camp and info page
You can use the same approach as the create About page to create these pages.
You can access the page at http://localhost:3000/camp
import React from 'react'
function CampPage() {
return (
<div>CampPage</div>
)
}
export default CampPage
You can access the page at http://localhost:3000/info
import React from 'react'
function InfoPage() {
return (
<div>InfoPage</div>
)
}
export default InfoPage
Create Nav bar
We use the navbar to navigate to other pages. In short, using a navbar for navigation enhances usability, accessibility, and the overall experience in web applications.
Add Navbar with Tailwind css
<nav>
<div className='flex gap-4 text-2xl'>
<Link href='/'>Home</Link>
<Link href='/about'>About</Link>
<Link href='/info'>Info</Link>
</div>
</nav>
Add to app/page.tsx
//rfce
import Link from 'next/link'
import React from 'react'
function page() {
return (
<div>
<nav>
<div className='flex gap-4 text-2xl'>
<Link href='/'>Home</Link>
<Link href='/about'>About</Link>
<Link href='/info'>Info</Link>
</div>
</nav>
</div>
)
}
export default page
Add to app/about/page.tsx , app/camp/page.tsx, app/info/page.tsx
import Link from 'next/link'
import React from 'react'
function InfoPage() {
return (
<div>
<nav>
<div className='flex gap-4 text-2xl'>
<Link href='/'>Home</Link>
<Link href='/about'>About</Link>
<Link href='/info'>Info</Link>
</div>
</nav>
InfoPage</div>
)
}
export default InfoPage
import Link from 'next/link'
import React from 'react'
function CampPage() {
return (
<div>
<nav>
<div className='flex gap-4 text-2xl'>
<Link href='/'>Home</Link>
<Link href='/about'>About</Link>
<Link href='/info'>Info</Link>
</div>
</nav>
CampPage</div>
)
}
export default CampPage
import Link from 'next/link'
import React from 'react'
function AboutPage() {
return (
<div>
<nav>
<div className='flex gap-4 text-2xl'>
<Link href='/'>Home</Link>
<Link href='/about'>About</Link>
<Link href='/info'>Info</Link>
</div>
</nav>
AboutPage
</div>
)
}
export default AboutPage
This is the result after adding the navbar.
To summarize, today we started by generating a Next.js project and explored the basics of routing, along with a simple lab to test routing functionality.
In the next article, we will begin creating basic components to help us understand the working principles and the concept of SSR (Server-Side Rendering).
...
🔧 Bandit Level 22 Level 23
📈 14.86 Punkte
🔧 Programmierung
🔧 Bandit Level 21 Level 22
📈 14.86 Punkte
🔧 Programmierung
🔧 Bandit Level 20 Level 21
📈 14.86 Punkte
🔧 Programmierung
🔧 Bandit Level 19 Level 20
📈 14.86 Punkte
🔧 Programmierung
🔧 Statement Level Trigger vs Row Level Trigger
📈 14.86 Punkte
🔧 Programmierung
🔧 Bandit Level 16 Level 17
📈 14.86 Punkte
🔧 Programmierung
🔧 Bandit Level 12 Level 13
📈 14.86 Punkte
🔧 Programmierung
🔧 Bandit Level 23 Level 24
📈 14.86 Punkte
🔧 Programmierung