Next.js Flashcards
What is Next.js?
Next.js is a React framework that enables server-side rendering and generating static websites.
True or False: Next.js supports both server-side rendering and static site generation.
True
What version of Next.js introduced the app directory feature?
Version 13
Fill in the blank: Next.js primarily uses __________ for routing.
File system
What command is used to create a new Next.js application?
npx create-next-app
In Next.js, what is the purpose of the ‘getStaticProps’ function?
It allows you to fetch data at build time for static generation.
Which feature was introduced in Next.js 14 for improved performance?
Edge functions
True or False: Next.js 15 introduced built-in support for TypeScript.
False
What is the default port for a Next.js application when running locally?
3000
What is the purpose of the ‘pages’ directory in a Next.js project?
It is used to define routes and the corresponding React components.
Which Next.js feature allows for automatic code splitting?
Dynamic imports
What is the difference between ‘getServerSideProps’ and ‘getStaticProps’?
‘getServerSideProps’ fetches data on each request, while ‘getStaticProps’ fetches data at build time.
True or False: Next.js automatically optimizes images in your application.
True
What are ‘API routes’ in Next.js?
They allow you to create backend endpoints within your Next.js application.
What is the ‘Link’ component used for in Next.js?
It is used for client-side navigation between pages.
Which file would you create to customize the Next.js server configuration?
next.config.js
Name one way to deploy a Next.js application.
Vercel
What feature in Next.js allows you to handle dynamic routes?
Brackets in the file name, e.g. [id].js
True or False: Next.js uses React for building user interfaces.
True
What is the purpose of ‘getInitialProps’?
It allows you to fetch data before rendering a page.
What is the ‘_app.js’ file used for in Next.js?
To initialize pages and persist layout between page changes.
Fill in the blank: Next.js provides __________ for automatic static optimization.
Static Generation
What is the primary advantage of using Next.js for SEO?
Server-side rendering improves search engine visibility.
What does the ‘next/image’ component do?
It optimizes images by serving them in the appropriate format and size.
True or False: Next.js can be used with any backend technology.
True
What is the purpose of the ‘middleware’ feature in Next.js?
To run code before a request is completed, useful for authentication.
Which command is used to start the Next.js development server?
npm run dev
What is the ‘fallback’ property in ‘getStaticPaths’ used for?
It determines what to show when a path is not generated at build time.
Fill in the blank: Next.js supports __________ for managing global styles.
CSS modules
What is a ‘Custom Server’ in Next.js?
A way to handle requests using a Node.js server instead of the default Next.js server.
Which version of Next.js introduced ‘React Server Components’?
Version 13