Basic of Next.js

Last Updated :
Discuss
Comments

Question 1

Which command is used to create a new Next.js app with default configuration?

  • npx create-react-app my-app

  • npm create-app nextjs

  • npm init next-app

  • npx create-next-app@latest my-app

Discuss it

Question 2

In Next.js 14 folder structure, which directory is mainly used to store server components and routes in the new App Router?

  • /app

  • /routes

  • /src

  • /pages

Discuss it

Question 3

If you want to organize your code better and avoid clutter in the root, where should you place all your Next.js codebase?

  • /root folder

  • /build folder

  • /dist folder

  • /src folder

Discuss it

Question 4

What is the correct way to install and setup Tailwind CSS in Next.js?

  • npm install tailwindcss postcss autoprefixer

  • Use yarn add tailwindcss-react

  • Just add <link> of Tailwind CDN in _app.js

  • Next.js comes with Tailwind pre-installed by default

Discuss it

Question 5

Next.js vs React : Which of the following is a unique advantage of Next.js over React?

  • Virtual DOM

  • Built-in SSR & SSG

  • JSX support

  • Component-based architecture

Discuss it

Question 6

How do you correctly import an image using Next.js <Image /> component?

  • <img src="/https/www.geeksforgeeks.org/public/myimage.png" />

  • import Image from 'next/image' and then <Image src="/https/www.geeksforgeeks.org/myimage.png" width={500} height={500} />

  • <Image src="http://example.com/myimage.png" />

  • <image />

Discuss it

Question 7

Which is the recommended way to add global styles in Next.js?

  • Use <style> tags inline

  • import CSS in every component separately

  • Use next.config.js to define CSS rules

  • Add CSS file in pages/_app.js (or app/layout.js)

Discuss it

Question 8

Which command is used to start the Next.js development server?

  • npm run start

  • next start

  • npm run dev

  • npm run server

Discuss it

Question 9

When using Dynamic Import in Next.js, what is the main advantage?

  • Prevents unused code from being bundled initially

  • Automatically reduces server response time

  • Creates a new build every time

  • Converts SSR to CSR

Discuss it

Question 10

In Next.js, where should you define metadata like title, description, and favicon when using the App Router (/app directory)?

  • Inside pages/_document.js

  • Directly in next.config.js

  • Inside pages/_app.js

  • Inside app/layout.js using export const metadata

Discuss it
Tags:
Next.js

There are 10 questions to complete.

Take a part in the ongoing discussion