Configuração e Preparação do Projeto
Configure um novo projeto Next.js 15 usando as ferramentas mais recentes e defina configurações básicas para um desenvolvimento ideal.
Configuração e Preparação do Projeto é uma aula grátis de Next.js 15 Fullstack Web Apps no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Next.js 15 Fullstack Web Apps, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Next.js 15 Fullstack Web Apps inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
Kickstarting Your Next.js Project
Time to spin up your first Next.js 15 app — prerequisites, the scaffolding tool, the file layout, and the dev server. This foundation matters.
Essential Tools: Node.js & npm
You need Node.js (the JS runtime for builds and the server) and npm, which ships with it. Check both: node -v and npm -v.
Creating Your First Next.js App
Scaffold a project with create-next-app. It asks about TypeScript, ESLint, Tailwind, and the App Router — which we will definitely use.
npx create-next-app@latest my-next-app --typescript --eslint --app --no-tailwind --import-alias "@/*"Understanding Project Structure
Key files after scaffolding: app/ holds your routes and layouts, public/ serves static assets, and next.config.js configures the app.
Running the Development Server
Start the dev server with npm run dev from your project folder. You get hot reloading, so code changes show up in the browser instantly.
cd my-next-app
npm run devYour First Page: Hello, CoddyKit!
Visit http://localhost:3000 to see the welcome page, rendered from app/page.js — the React component for your app's root route.
// app/page.js
export default function Home() {
return (
<main>
<h1>Hello, CoddyKit!</h1>
<p>Your Next.js app is running.</p>
</main>
);
}package.json: Project's Heartbeat
package.json is the project's heartbeat: name and version, the dev/build/start scripts, and your dependency list.
{
"name": "my-next-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "^15.0.0",
"react": "^18",
"react-dom": "^18"
}
}next.config.js: Customizing Next.js
next.config.js customizes your app — image domains, redirects, custom headers, webpack tweaks — by exporting a config object.
/** @type {import('next').NextConfig} */
const nextConfig = {
// For example, enable React Strict Mode
reactStrictMode: true,
// Or configure image domains for `next/image`
images: {
domains: ['example.com', 'another-domain.com'],
},
};
module.exports = nextConfig;Environment Variables with .env
Use .env.local for environment variables like API keys. Anything prefixed NEXT_PUBLIC_ reaches the client; everything else stays server-only.
# .env.local
NEXT_PUBLIC_ANALYTICS_ID=UA-123456789-1
DATABASE_URL="postgresql://user:password@host:port/database"Quick Check: Project Setup
Let's test your understanding of setting up a Next.js project.
Recap: Your Next.js Journey Begins!
You set up a Next.js 15 project: Node and npm, create-next-app, the app/ structure, the dev server, and the key config files. Routing next!
Perguntas Frequentes
A aula “Configuração e Preparação do Projeto” é grátis?
Sim — o texto completo de “Configuração e Preparação do Projeto” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Next.js 15 Fullstack Web Apps, atualize para CoddyKit PRO. O curso de Next.js 15 Fullstack Web Apps inclui 4 aulas no total.
O que vou aprender em “Configuração e Preparação do Projeto”?
Configure um novo projeto Next.js 15 usando as ferramentas mais recentes e defina configurações básicas para um desenvolvimento ideal. Você pratica Next.js 15 Fullstack Web Apps com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Next.js 15 Fullstack Web Apps?
Nenhuma experiência prévia é necessária. Next.js 15 Fullstack Web Apps no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Configuração e Preparação do Projeto”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Next.js 15 Fullstack Web Apps?
Sim. Cada aula de Next.js 15 Fullstack Web Apps inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Introdução ao Next.js 15
- Configuração e Preparação do Projeto
- Fundamentos de Páginas, Layouts e Roteamento
- Metadados, SEO e o cabeçalho do documento