# Dasar-dasar Next.js (React / Next.js)

> App Router, Server Components, Client Components, routing berbasis file, layouts, halaman

- 25 pertanyaan wawancara
- Mid-Level
- [Pertanyaan Wawancara: React / Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara.md)

## 1. Apa itu App Router di Next.js?

**Jawaban**

App Router adalah sistem routing baru di Next.js 13+ berdasarkan direktori app/. Ini menggantikan Pages Router dan memperkenalkan Server Components secara default, layout bersama, dan model routing yang lebih fleksibel dengan konvensi file seperti page.tsx, layout.tsx, dan loading.tsx.

## 2. Bagaimana cara membuat route /about di App Router?

**Jawaban**

Di App Router, setiap folder mewakili segmen route. Untuk membuat /about, buat app/about/page.tsx. File page.tsx diperlukan agar route dapat diakses secara publik. Tanpa file ini, folder hanya akan menjadi segmen path tanpa halaman yang ditampilkan.

## 3. Apa perilaku default komponen di App Router?

**Jawaban**

Di App Router, semua komponen adalah Server Components secara default. Mereka hanya berjalan di server dan tidak mengirim JavaScript ke klien, meningkatkan performa. Untuk menggunakan fitur klien (hooks, event), harus menambahkan direktif 'use client' di bagian atas file.

## 22 pertanyaan lagi tersedia

- Bagaimana cara membuat route dinamis /posts/[id] di App Router?
- Apa kegunaan file layout.tsx di App Router?

Daftar gratis: https://sharpskill.dev/id/login

## Topik wawancara React / Next.js lainnya

- [Dasar-Dasar JavaScript](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/javascript-essentials.md): 25 pertanyaan, Junior
- [Dasar-Dasar React](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-fundamentals.md): 20 pertanyaan, Junior
- [React Hooks](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-hooks.md): 22 pertanyaan, Junior
- [Siklus hidup komponen](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/component-lifecycle.md): 18 pertanyaan, Junior
- [React Router](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-router.md): 20 pertanyaan, Junior
- [Manajemen state dengan Context](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/state-management-context.md): 18 pertanyaan, Junior
- [Form & Controlled Components](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/forms-controlled-components.md): 20 pertanyaan, Mid-Level
- [Pengambilan Data & API](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/fetching-data-api.md): 20 pertanyaan, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-query-tanstack.md): 20 pertanyaan, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/styling-css-in-js.md): 18 pertanyaan, Mid-Level
- [TypeScript dengan React](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/typescript-react.md): 20 pertanyaan, Mid-Level
- [Data Fetching Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-data-fetching.md): 24 pertanyaan, Mid-Level
- [Server Actions Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-server-actions.md): 20 pertanyaan, Mid-Level
- [Routing & Navigasi Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-routing-navigation.md): 22 pertanyaan, Mid-Level
- [API Routes Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-api-routes.md): 20 pertanyaan, Mid-Level
- [Metadata & SEO di Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-metadata-seo.md): 18 pertanyaan, Mid-Level
- [Middleware & Auth di Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-middleware-auth.md): 22 pertanyaan, Mid-Level
- [Pengujian React](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-testing.md): 20 pertanyaan, Mid-Level
- [Zustand State Management](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/zustand-state-management.md): 18 pertanyaan, Mid-Level
- [Optimasi Performa React](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-performance-optimization.md): 22 pertanyaan, Senior
- [Error Boundaries & Error Handling](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-error-boundaries.md): 18 pertanyaan, Senior
- [Advanced React Patterns](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/advanced-react-patterns.md): 20 pertanyaan, Senior
- [Fitur Lanjutan Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-advanced-features.md): 24 pertanyaan, Senior
- [Deployment & Produksi Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-deployment-production.md): 20 pertanyaan, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-architecture-patterns.md): 22 pertanyaan, Senior
- [React Server Components](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-server-components.md): 26 pertanyaan, Senior
- [Internasionalisasi Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-internationalization.md): 20 pertanyaan, Senior
- [Keamanan React & Praktik Terbaik](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-security-best-practices.md): 22 pertanyaan, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-fundamentals