Challenge your understanding of the foundational principles and features of Next.js, a popular React framework for efficient frontend development. Assess your knowledge of routing, file structure, data fetching, and more with these carefully crafted fill-in-the-blank questions.
In Next.js, adding a file named 'about.js' inside the 'pages' directory automatically creates the /______ route.
Explanation: The correct answer is 'about' because files in the 'pages' directory automatically map to routes of the same name. 'contact', 'home', and 'main' would require corresponding files for those routes to exist, which this example does not provide.
Each page component in the Next.js 'pages' directory must be exported as ______.
Explanation: 'default' is correct because Next.js expects a default export from page components to render them correctly. 'static', 'public', and 'async' do not fulfill this requirement and will cause runtime errors.
To fetch data at build time for a static page, Next.js uses the special function ______.
Explanation: 'getStaticProps' is the correct function for static generation at build time. 'getInitialProps' handles server-side and client-side rendering, while 'fetchProps' and 'useStaticData' are not recognized Next.js functions.
Next.js serves static files like images and fonts when they are placed in the ______ folder at the root of the project.
Explanation: 'public' is correct because any files placed there are served directly at the root path. 'static' was used in older versions, and 'assets' and 'resources' are not predefined by Next.js for static serving.
Serverless API routes in a Next.js app should be placed inside the 'pages/______' directory.
Explanation: 'api' is the correct answer as Next.js treats files in 'pages/api' as serverless API endpoints. 'server', 'endpoints', and 'backend' are not valid special directories for this purpose.