Hello​

I’m Hafsa Kanwal

I am a senior student in Sir Asharib Ali's class.

Follow me on Github and LinkedIn

●​ GitHub: https://github.com/kanwalhafsa
●​ LinkedIn: https://linkedin.com/in/hafsa-kanwal-2945442b7

For Quiz Preparation

1.​ What is Next.js primarily used for?

○​ A) Game development
○​ B) Server-side rendering and React-based web apps
○​ C) Mobile application development
○​ D) Database management
○​ Answer: B
2.​ Which command is used to create a new Next.js app?
○​ A) npm create-next-app
○​ B) npx create-next-app
○​ C) next init
○​ D) npx next-app
○​ Answer: B
3.​ What file is used to define custom server-side configurations in Next.js?
○​ A) server.config.js
○​ B) next.config.js
○​ C) app.config.js
○​ D) config.js
○​ Answer: B
4.​ Which lifecycle feature does Next.js provide for pre-rendering pages?
○​ A) getStaticProps and getServerSideProps
○​ B) componentDidMount
○​ C) useEffect
○​ D) renderToString
○​ Answer: A
5.​ What is the default port on which a Next.js application runs?
 2

○​ A) 8000
○​ B) 5000
○​ C) 3000
○​ D) 8080
○​ Answer: C
6.​ In Next.js, how are routes created?
○​ A) By defining routes in next.config.js
○​ B) By creating files inside the pages directory
○​ C) By using a router object in React
○​ D) By writing routes in server.js
○​ Answer: B
7.​ What is the correct syntax for dynamic routes in Next.js?
○​ A) [id].js
○​ B) {id}.js
○​ C) <id>.js
○​ D) $id.js
○​ Answer: A
8.​ How do you navigate programmatically in Next.js?
○​ A) Using window.location
○​ B) Using Router.push()
○​ C) Using Link component only
○​ D) Using router.push() from useRouter
○​ Answer: D
9.​ What is the purpose of getStaticPaths in Next.js?
○​ A) To fetch data during server-side rendering
○​ B) To generate paths for dynamic routes at build time
○​ C) To manage API endpoints
○​ D) To configure custom middleware
○​ Answer: B
10.​Which feature of Next.js ensures client-side navigation?
○​ A) next/router
○​ B) window.history
○​ C) app-router
○​ D) next-history
○​ Answer: A
11.​ What directory is used for API routes in Next.js?
○​ A) /api
○​ B) /pages/api
○​ C) /routes/api
○​ D) /server/api
 3

○​ Answer: B
12.​How can you define a POST API route in Next.js?
○​ A) Using app.js
○​ B) Creating a file in pages/api and handling POST in the handler
○​ C) Using next.api
○​ D) Defining POST in next.config.js
○​ Answer: B
13.​What is the default export in an API route file?
○​ A) An object
○​ B) A string
○​ C) A function handling the request and response
○​ D) A React component
○​ Answer: C
14.​How do you return JSON data in an API route?
○​ A) res.json(data)
○​ B) res.write(data)
○​ C) res.data(data)
○​ D) res.sendJSON(data)
○​ Answer: A
15.​What HTTP methods can be handled in a Next.js API route?
○​ A) Only GET and POST
○​ B) All standard HTTP methods (e.g., GET, POST, PUT, DELETE)
○​ C) Only PUT and DELETE
○​ D) Only custom methods
○​ Answer: B
16.​What does the next/image component optimize?
○​ A) Text content
○​ B) Images for faster loading and responsiveness
○​ C) CSS performance
○​ D) Database queries
○​ Answer: B
17.​How do you preload a font in Next.js?
○​ A) Use the next/font package
○​ B) Add a <link> tag in _document.js
○​ C) Both A and B
○​ D) Use the font tag
○​ Answer: C
18.​How can you configure redirects in Next.js?
○​ A) By using next/redirect
 4

○​ B) Inside the redirects function in next.config.js

○​ C) By modifying _app.js
○​ D) By creating a redirects.js file
○​ Answer: B
19.​What is Middleware in Next.js used for?
○​ A) Handling styles
○​ B) Running code before rendering pages
○​ C) Managing database connections
○​ D) Defining API routes
○​ Answer: B
20.​What is the purpose of the _middleware.js file?
○​ A) To define API middlewares
○​ B) To apply server-side logic before requests are processed
○​ C) To handle errors in Next.js
○​ D) To optimize images
○​ Answer: B
21.​How do you define environment variables in Next.js?
○​ A) Using .env.local or .env files
○​ B) Defining them in next.config.js
○​ C) Using a variables.env file
○​ D) Adding variables in _app.js
○​ Answer: A
22.​What does a GROQ query start with?
○​ A) SELECT
○​ B) FETCH
○​ C) *
○​ D) QUERY
○​ Answer: C
23.​How do you fetch a list of blog posts in GROQ?
○​ A) *[_type == "post"]
○​ B) SELECT * FROM post
○​ C) FETCH posts.all
○​ D) GET all posts
○​ Answer: A
24.​How do you install Sanity CLI?
○​ A) npm install -g @sanity/cli
○​ B) npm install sanity-cli
○​ C) npx sanity install-cli
○​ D) yarn global add sanity
 5

○​ Answer: A
25.​What is the purpose of GROQ in Sanity?
○​ A) Managing CSS files
○​ B) Querying content from the Sanity backend
○​ C) Writing API endpoints
○​ D) Managing React components
○​ Answer: B

26. What is Sanity.io?

●​ A) A database management system

●​ B) A content management system (CMS)
●​ C) A JavaScript framework
●​ D) An image optimization tool
●​ Answer: B

27. What is the purpose of the schema in Sanity?

●​ A) To define the structure and types of content

●​ B) To manage authentication
●​ C) To query data from the backend
●​ D) To configure middleware
●​ Answer: A

28. How can you perform real-time data listening in Sanity?

●​ A) Using the listen method in the client

●​ B) Using GraphQL subscriptions
●​ C) Using the subscribe method in GROQ
●​ D) Using onDataChange hooks
●​ Answer: A

29. How do you manage authentication in a Sanity Studio project?

●​ A) Using OAuth or third-party providers

●​ B) Through sanity.auth.js
●​ C) It does not support authentication
●​ D) By enabling auth: true in next.config.js
●​ Answer: A

30. How do you filter records with a specific field value in GROQ?

●​ A) *[field == "value"]
●​ B) FETCH records WHERE field = value
●​ C) GET field IS value
 6

●​ D) FILTER(field=value)
●​ Answer: A

31. Which GROQ keyword is used to limit the number of results returned?

●​ A) LIMIT
●​ B) max()
●​ C) count
●​ D) [_limit == n]
●​ Answer: A

32. How can you combine multiple filters in GROQ?

●​ A) By using logical operators && and ||

●​ B) By chaining filters with a period
●​ C) By adding combine()
●​ D) By using SQL-like AND/OR syntax
●​ Answer: A

33. What is the syntax for selecting specific fields in GROQ?

●​ A) {field1, field2}
●​ B) SELECT field1, field2
●​ C) fields: [field1, field2]
●​ D) field1, field2
●​ Answer: A

34. Which method fetches dynamic GROQ queries using Sanity’s JavaScript client?

●​ A) client.fetch(groqQuery)
●​ B) sanity.dynamicQuery()
●​ C) query.fetch()
●​ D) fetchDynamic()
●​ Answer: A

35. How do you enable dynamic imports in Next.js?

●​ A) By using the next/dynamic module

●​ B) By adding dynamicImport: true in next.config.js
●​ C) Using importDynamic in React components
●​ D) By calling enableDynamic()
●​ Answer: A

36. Which hook is recommended to fetch dynamic data in a server-side rendered page?

●​ A) getServerSideProps
 7

●​ B) useEffect
●​ C) useQuery
●​ D) getStaticProps
●​ Answer: A

37. How do you handle 404 pages dynamically in Next.js?

●​ A) By creating a 404.js file inside the pages folder

●​ B) By defining a custom ErrorPage component
●​ C) By editing the next.config.js file
●​ D) By enabling dynamicErrors: true
●​ Answer: A

38. How do you deploy a Next.js app to Vercel?

A. By pushing the code to GitHub and connecting it to Vercel​

B. By using the vercel CLI command​
C. By copying the build folder to Vercel manually​
D. Both A and B

Answer: D

39. What does the Link component in Next.js do?

A. Renders a hyperlink for navigation between pages​

B. Links to external URLs​
C. Allows dynamic imports​
D. Creates an API route

Answer: A

40. Which lifecycle method is used to fetch data on the server side in Next.js?

A. componentDidMount​
B. getServerSideProps​
C. useEffect​
D. componentWillUnmount

Answer: B

41. What does getStaticPaths do in Next.js?

A. Fetches data for each static page at runtime​

B. Defines paths for dynamic pages to pre-render​
 8

C. Configures a static API route​

D. Fetches global data

Answer: B

42. How can you add custom error pages in Next.js?

A. By creating a 404.js or 500.js file in the pages/ folder​

B. By adding a global error handler in next.config.js​
C. By configuring error boundaries in App.js​
D. By modifying the index.js file

Answer: A

43. What is the purpose of the next.config.js file?

A. To configure build settings and customizations​

B. To define the structure of the pages/ folder​
C. To import external CSS files​
D. To manage environment variables

Answer: A

44. How do you deploy a Next.js app to Vercel?

A. By pushing the code to GitHub and connecting it to Vercel​

B. By using the vercel CLI command​
C. By copying the build folder to Vercel manually​
D. Both A and B

Answer: D

45. Which method does Next.js use to handle routing?

A. File-based routing​
B. API-based routing​
C. Query string routing​
D. Hash-based routing

Answer: A

46. What is the role of _app.js in Next.js?

A. It serves as the entry point for API routes​

B. It is used to configure custom HTML templates​
 9

C. It is used to initialize pages and layout components​

D. It handles dynamic routing

Answer: C

47. Which hook is commonly used in Next.js to fetch data on the client side?

A. useEffect​
B. useFetch​
C. useServerSideProps​
D. useData

Answer: A

48. What is a "document" in Sanity CMS?

A. A form for inputting data​

B. A collection of structured content​
C. A JavaScript file for API routes​
D. A file containing the UI components

Answer: B

49. What does sanity.cli provide for developers?

A. CLI tools for running and managing Sanity Studio​

B. A user interface for content editing​
C. API access for fetching data​
D. A debugger for Sanity projects

Answer: A

50. How can you deploy a Sanity project?

A. Using GitHub Pages​

B. By pushing the project to a server manually​
C. By using Vercel or Netlify with the Sanity CLI​
D. By using AWS Lambda functions

Answer: C

51. Which tool does Sanity use for managing content and media?

A. Sanity Studio​
B. Sanity Cloud​
 10

C. Sanity CMS​
D. Sanity Media Manager

Answer: A

52. What type of utility-first CSS framework is Tailwind CSS?

A. A utility-first framework for fast web design​

B. A pre-designed CSS framework​
C. A responsive CSS library​
D. A JavaScript library for styling

Answer: A

53. How can you customize Tailwind CSS?

A. By modifying the tailwind.css file​

B. By using the tailwind.config.js file​
C. By creating custom components in HTML​
D. By using pre-built CSS frameworks

Answer: B

54. Which command is used to install Tailwind CSS in a project?

A. npm install tailwind​

B. npm install tailwindcss​
C. yarn add tailwind​
D. yarn install tailwindcss

Answer: B

55. Which class is used to create a margin in Tailwind CSS?

A. m-{size}​
B. mt-{size}​
C. margin-{size}​
D. margin-top-{size}

Answer: A

56. How does Tailwind handle responsiveness?

A. Through custom media queries​

B. By using mobile-first breakpoints like sm, md, lg, and xl​
 11

C. By using a separate mobile CSS file​

D. By importing a mobile-first library

Answer: B

57. Which utility class is used to apply padding in Tailwind CSS?

A. p-{size}​
B. padding-{size}​
C. pt-{size}​
D. space-{size}

Answer: A

58. What is ShadCN?

A. A CSS framework​
B. A UI component library built for React​
C. A JavaScript tool for creating animations​
D. A content management system

Answer: B

59. What is the primary advantage of using ShadCN?

A. It provides pre-built UI components optimized for performance​

B. It is a backend framework​
C. It is a database for storing content​
D. It is a plugin for integrating third-party services

Answer: A

60. How does ShadCN handle styling?

A. By using inline styles​

B. Through a combination of CSS-in-JS and Tailwind CSS​
C. By relying on external CSS frameworks​
D. By using SCSS files

Answer: B